シェーダーコードと.jsファイルを分割する方法が知りたい。

提示コードですソースファイルを分けたいです。 .js , .vert,.frag等のファイルの分割したいのですが調べたもやり方がわかりませんどうやってソースファイルを分割するのでしょか？
現状のやり方では順序の関係でバグが起きやすいと思うのですが

参考サイト: https://maku.blog/p/itkdix9/
参考サイト: https://qiita.com/mczkzk/items/079c36b6ee3f0a802572
参考サイト: https://sbfl.net/blog/2016/09/06/webgl2-tutorial-3d-rendering/
参考サイト:

js
1function test()
2{
3      console.log("あああ");
4}

js
1'use strict'
2
3function main()
4{
5      test();
6      console.log("いいいい");
7};
8
9main();

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>WebGL Demo</title>
6
7    <!-- ライブラリ -->
8    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
9            crossorigin="anonymous" defer>
10          </script>
11          
12          
13    
14
15
16
17
18
19//////////////////////////////////////////////////////////////////////////
20    <!-- スクリプト -->
21    <script src="test.js" defer></script>
22    <script src="main.js" defer></script>
23//////////////////////////////////////////////////////////////////////////
24
25  </head>
26
27  <body>
28    <canvas id="glcanvas" width="640" height="480"></canvas>
29  </body>
30</html>