webpack效能優化 DLL

webpack效能優化的方式有很多種，本文之所以將 dll 單獨講解，是因為 dll 是一種最簡單粗暴並且極其有效的優化方式。

在通常的打包過程中，你所引用的諸如：jquery、bootstrap、react、react-router、redux、antd、vue、vue-router、vuex 等等眾多庫也會被打包進 bundle 檔案中。由於這些庫的內容基本不會發生改變，每次打包加入它們無疑是一種巨大的效能浪費。

dll 的技術就是在第一次時將所有引入的庫打包成乙個 dll.js 的檔案，將自己編寫的內容打包為 bundle.js 檔案，這樣之後的打包只用處理 bundle 部分。

以乙個 vue 專案為例，首先建立乙個名為 webpack.dll.config.js 的檔案

var path = require("path"),
fs = require('fs'),
webpack = require("webpack");
var vendors =[
'vue'
, 'vue-router'
, 'vuex'
];module.exports =,
output: ,
plugins: [
newwebpack.dllplugin()
]};

這個檔案的作用是將 vue、vue-router 以及 vuex 合併打包為乙個名為 dll.js 的靜態資源包，同時生成乙個 manifest.json 檔案方便對 dll.js 中的模組進行引用。

要注意的是，執行 webpack 命令是預設執行該目錄下名為 webpack.config.js 或者 webpackfile.js 的檔案。所以需要通過 --config 指令手動指定該檔案，最後加入 -p 指令將 dll.js 壓縮。

$ webpack --config webpack.dll.config.js -p

這樣，在專案根目錄下就會多增加乙個 dist 資料夾，其中有壓縮之後的 dll.js 與 manifest.json 檔案。

manifest.json 檔案內容如下，給各個模組賦予 id 以便引用。

},
"./node_modules/vue-router/dist/vue-router.esm.js": ,
"exports": [
"default"]
},"./node_modules/vue/dist/vue.runtime.esm.js": ,
"exports": [
"default"]
},//.......

最後在 webpack.config.js 中新增引用。在 plugins 屬性中新增 dllreferenceplugin 外掛程式，並指明 manifest.json 檔案的引用路徑。

//
...plugins: [
newwebpack.dllreferenceplugin()
]

在確保成功執行 webpack.dll.config.js 檔案後，執行 webpack -p 進行專案打包。

可以看到打包在 dll 檔案中的檔案都被 delegated(委派) ，而不是直接打進 bundle 檔案中。

這樣我們就將所有的資源完成打包，生成的 dist 目錄如下：

不過 dist 資料夾要想作為乙個完整的工程還少乙個 html 檔案，我建立了乙個名為 pack.js 的檔案，使用 nodejs 的 filesystem 對 html 檔案進行修改並拷貝。

pack.js

var fs = require('fs');
fs.readfile('./index.html', 'utf8', (err, data) => 
else
});} 
else
});

我們需要在模組的入口 html 中新增的佔位字元，pack.js 的作用就是將 html 檔案拷貝乙份到 dist 目錄下，同時將替換為引用 dll.js 的 script 標籤，並在引用檔案後新增時間戳。

<
body
>
<
div 
id="demo"
class
="container"
>
div>
<
script 
src="./bundle.js"
>
script
>
body
>
html
>

在執行 webpack -p 打包後，輸入下面命令執行 pack.js，就會在 dist 目錄下生成 html 檔案。

內容如下：

<
body
>
<
div 
id="demo"
class
="container"
>
div>
<
script 
src="./dist/dll.js?v=1488250309725"
>
script
>
<
script 
src="./bundle.js?v=1488250309725"
>
script
>
body
>
html
>

這樣 dist 資料夾就作為乙個完整的、不需要任何手動操作、已經壓縮混淆後的專案可以直接進行線上的部署。

實際專案模板參考位址如下。由於筆者作為 react 與 vue 的雙持開發者，所以建立了兩個模板，以便之後通過 yomen(yo) 之類的進行腳手架工具化。

感謝你的瀏覽，希望能有所幫助。

webpack效能優化 DLL

webpack效能優化 dll

webpack 效能優化 dll 分包

webpack 效能優化

webpack效能優化 DLL

webpack效能優化 dll

webpack 效能優化 dll 分包

webpack 效能優化

相關推薦