script標籤動態引入js—cdn服務器掛了，整個項目起不來

1、前言

       項目越到後面，暴露的問題越多。用到一些前端插件時，一般要麼通過npm安裝，要麼在document.ejs通過<script/>標籤動態引入，可是最近發現，通過<script/>標籤引入的經常出問題，要麼慢要麼直接無響應，於是，產品們都在吐槽，都說讓看看怎麼解決！公司又沒有自己的文件服務器，怎麼解決？我也很委屈，又不是我做的，又不是現在纔開始這麼做的，現在提出來讓我解決！真的是好無奈！

      首頁加載很慢，一部分是公司網最近確實出問題了（我打開ant官網有時候都拒絕訪問），一方面是公司非要把好多個明明沒有任何關係的模塊放在一個項目裏，導致越來越臃腫。雖然，在使用時可以通過權限來控制能看到哪些模塊，可不管用不用得到的，在初次加載時，都是加載全部的。

       吐槽完畢，任務還是要解決的，現在不僅是產品吐槽、後端不斷來問我，我自己都覺得慢。既然不能一次性加載，那就按需加載吧。

2、兩種解決方式

2.1、getscript-promise+watcher

解決方法：

       1、項目中引入  getscript-promise ，（cnpm intall   getscript-promise --save）;

       2、從document.ejs  中刪除原先加入的script標籤；

       3、在需要使用的地方引入getscript-promise，並動態加載

  useEffect(() => {
    load()
  }, []);
  async function load() {
    const getScript = require('getscript-promise');
    getScript('https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.3/jspdf.min.js');
  }

出現問題：

     1、如果系統中，多個頁面都使用了這個js文件，則會被加入多次（在控制檯中的Elements中會發現，同一個<script/>被添加多次）；

     2、如果頁面有下鑽功能，再返回當前頁面，又會被重複添加，即只要進入一次該頁面，就會添加一次<script/>標籤

解決思路：

      1、在加載需要的js時，判斷當前是否存在，不存在時，加載；

      -------無法判斷當前需要的js是否存在；判斷方法太難，效率不高

     2、保證整個系統就加載一次

     -----指定effect的類型（https://mp.csdn.net/console/editor/html/105988894）

    test: [
      async function fff() {
        const getScript = require('getscript-promise');
        getScript('https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.3/jspdf.min.js');
      },
      { type: 'watcher' },
    ],
	

調用：

	  useEffect(() => {
  dispatch({ type: 'personalArchiveModel/test' });
  }, []);
  

 

侷限性：

  1、只能在dva框架中使用；

  2、沒有辦法封裝成工具方法來使用

2.2、 scriptjs

使用：

   1、項目中引入 scriptjs，（cnpm intall  script --save）;

   2、從document.ejs  中刪除原先加入的script標籤；

  3、在需要使用的地方引入script，並動態加載

  useEffect(() => {
    loadJsPDF();
  }, []);

  function loadJsPDF() {
  const _script = require('scriptjs');
  const jsPDFUrl = 'https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.3/jspdf.min.js';
    _script(jsPDFUrl, () => {});
  }

優點：

   1無論該方法被調用多少次，系統中永遠只存在一個（下鑽頁、多處使用）；

   2任何框架均可使用；

   3可方便封裝成工具方法，便於維護管理

const _script = require('scriptjs');
const jsPDFUrl = 'https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.3/jspdf.min.js';
export function loadJsPDF() {
  _script(jsPDFUrl, () => {});
}