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

前端開發需求總數層出不窮，有時須要在某個時刻、某個頁面、某個組件，甚至某個邏輯中加載一些css、js文件，好比微信sdk，地圖插件、主題css等等，還要在加載完成以後，執行一些邏輯。這些第三方文件，每每只在一個場景用到，並不想放在全局，而第三方文件又沒辦法經過dynamic import打包進來，此時就須要某種動態加載任意資源的方法了。

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

umd規範，無任何依賴，動態加載js、css文件返回一個promise。

github: github.com/liumin1128/…

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。