How to deal with many shaders in a complex WebGL program?

I know that there are two main ways shaders can be used in a WebGL application:

1. store them in HTML inside a <script type="x-shader"> tag like this

  <script type="x-shader/x-vertex">
    #version 300 es
    precision mediump float;
    in vec3 aVertexPosition;

    void main(void) {
      gl_Position = vec4(aVertexPosition, 1.0);
    }
  </script>

2. have them as multiline string in javascript:

  var myshader = `#version 300 es
    precision mediump float;

    // Supplied vertex position attribute
    in vec3 aVertexPosition;

    void main(void) {
      // Set the position in clipspace coordinates
      gl_Position = vec4(aVertexPosition, 1.0);
    }`;

I'm currently making a complex WebGL program, and I have a lot of shaders (both vertex and fragment). I used method 1 to store them initially, but the HTML script is getting too crowded now. I would like a more elegant method to store and use them with performance in mind.

Thank you