優雅的實現動態載入 css、js

八歲程式設計師發表於2019-03-22
CSSJS
前端開發需求總數層出不窮，有時需要在某個時刻、某個頁面、某個元件，甚至某個邏輯中載入一些css、js檔案，比如微信sdk，地圖外掛、主題css等等，還要在載入完成之後，執行一些邏輯。這些第三方檔案，往往只在一個場景用到，並不想放在全域性，而第三方檔案又沒辦法通過dynamic import打包進來，此時就需要某種動態載入任意資源的方法了。

給大家分享的是 dynamic-file，完美實現以上需求，使用也很方便。

umd規範，無任何依賴，動態載入js、css檔案返回一個promise。

install

npm i -S dynamic-file

// or
yarn add dynamic-file複製程式碼

use

import dynamicFile from 'dynamic-file'

<script src="../dist/main.js"></script>

if(!window.jquery) {
    dynamicFile([
    'https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css',
    'https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js',
    'https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js',
    'https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js'
]).then(() => {
    alert('success！！！')
})}複製程式碼

why?

前端開發過程中，經常需要載入一些外部資源，類似各種sdk，css主題。有時我們不希望在head中聲名，因為這個檔案可能只在某些頁面中，甚至某些元件中才被需要，全域性載入無疑會帶來不必要的效能問題，所以可能會=會需要一種執行在瀏覽器端，動態載入css或js的方法。

只需簡單宣告即可完成載入，該方法返回一個promise，等待檔案載入完成呼叫後續邏輯。

支援UMD，瀏覽器可以在window.dynamicFile中直接使用。

需要注意的

內容基於promise.all實現並行載入，如果需要載入多個檔案，並且其中某些檔案有依賴關係，可以將分兩步載入，將第二步放在第一步的then中執行。

並未實現單例模式，需要自行判斷檔案是否已經載入過，比如通過window.jquery。



相關文章