dll ? 動態鏈接庫英文為DLL，是Dynamic Link Library的縮寫。DLL是一個包含可由多個程式，同時使用的代碼和數據的庫。 起因 在查看hzero前端項目框架介紹時提到了dll，外加之前經常看見dll文件，於是有了興趣瞭解一下 webpack dll。 webpack官網介紹 D ...
dll ?
動態鏈接庫英文為DLL，是Dynamic Link Library的縮寫。DLL是一個包含可由多個程式，同時使用的代碼和數據的庫。
起因
在查看hzero前端項目框架介紹時提到了dll，外加之前經常看見dll文件，於是有了興趣瞭解一下 webpack dll。
webpack官網介紹
DLLPlugin 和 DLLReferencePlugin 用某種方法實現了拆分 bundles，同時還大大提升了構建的速度.
模塊預編譯原理
webpack.dllPlugin本質是將大量復用模塊且不會頻繁更新的庫進行預編譯，且只需要編譯一次，編譯完成後產出指定文件（可以稱為動態鏈接庫）。在之後的構建過程中不會再對這些模塊進行編譯，而是直接使用DllReferencePlugin來引用動態鏈接庫的代碼，因此可以提高構建速度。一般可以將第三方模塊進行預編譯，如 vue、vue-router、vuex等，只要這些依賴模塊不更新，就不需要再重新編譯。
vue-cli-plugin-dll
因為項目使用的vue-cli構建的，搜到了這麼個專門的插件可以使用。
為了實踐效果。使用兩個項目相同的項目來進行對比。
使用** vue create test **創建了個名稱為test的項目，在此基礎上增加了moment / lodash / bignumber / ElementUI / Viewer / mint / VueKinesis 庫來體現效果。
yarn build : 9.37s
yarn serve : 2.08s
複製上面項目出來，重命名項目為test-dll開始實現dll配置。步驟如下：
- 執行命令 vue add dll 來安裝 vue-cli-plugin-dll 插件。
- 新建vue.config.js 文件來進行相關的配置。
const path = require('path')
module.exports = {
pluginOptions: {
dll: {
// 入口配置
entry: ['vue','vuex','vue-router','vue-kinesis','v-viewer','moment','mint-ui','lodash','element-ui','core-js','bignumber'],
// 輸出目錄
output: path.join(__dirname, './public/dll'),
// 是否開啟 DllReferencePlugin,
open: true,
// 在執行 `dev` , `build` 等其他指令時，程式會自動將 `dll` 指令生成的 `*.dll.js` 等文件自動註入到 index.html 中。
inject: true,
}
}
}
- 生成dll文件
需自行使用命令生成。
npm run dll // or
yarn dll // or
npx vue-cli-service dll
配置完成，dll文件生成，此時已經將文件都集中到輸出目錄中。來看看效果吧！
yarn build: 4.17s
yarn serve: 0.5s
可以清楚的看到，無論是打包還是構建，速度快了很多。且構建出來的文件同樣可以執行。我們再來對比下線上怎麼請求資源的吧。
test項目：
test-dll項目：
可以看見，主要區別在於 chunk-vendors.js 和 dll.508b73da.dll.js 。
正常的項目 chunk包大小已經到了11M，打包過程和載入也是主要花時間在這。不過並沒有dll包需要載入。
相反，經過dll plugin處理後的項目，chunk包只有不到1M，dll包也只有1.6M,極大的縮減了打包和載入時間。同時在首頁渲染時也是分離了代碼，可以同步進行載入js文件。
當然，我這項目只有文件的引入，沒有業務代碼，對比才會這麼震撼。但是同樣可以看出dll可以實現項目的優化。
多入口配置
在這個的基礎上，可以在對dll文件拆分進行優化。配置如下：
const path = require('path')
module.exports = {
pluginOptions: {
dll: {
// 入口配置
entry: {
vue: ["vue", "vue-router", "vuex", 'vue-kinesis'],
plugin: ["v-viewer",'moment','lodash','bignumber','core-js'],
ui: ["mint-ui",'element-ui'],
},
// 輸出目錄
output: {
path: path.join(__dirname, 'public/dll'),
filename: '[name].dll.js',
// vendor.dll.js中暴露出的全局變數名
// 保持與 webpack.DllPlugin 中名稱一致
library: '[name]_[hash]'
},
// 是否開啟 DllReferencePlugin,
open: true,
// 在執行 `dev` , `build` 等其他指令時，程式會自動將 `dll` 指令生成的 `*.dll.js` 等文件自動註入到 index.html 中。
inject: true,
}
}
}
通過配置多個entry和對應對output來接收。執行 yarn dll 命令後，會生成多個dll.js文件。
yarn build:
yarn serve:
看到打包速度又優化了些，而且可以做到dll.js文件拆分同時載入。
在引入的文件多且臃腫的情況下，使用webpack dll進行性能優化是個很好的選擇。
註意事項
每當生成過dll中存在依賴需進行升級或更新的時候，都要執行 生成dll文件 的命令來生成新的文件。
