Webpack效能最佳化的方式有很多種,本文之所以將 dll 單獨講解,是因為 dll 是一種最簡單粗暴且極為有效的最佳化方式。本文主要介紹了詳解webpack效能優化-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 = { entry: { vendor: vendors }, output: { path: path.join(__dirname, "dist"), filename: "Dll.js", library: "[name]_[hash]" }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, "dist", "manifest.json"), name: "[name]_[hash]", context: __dirname }) ] };
這個檔案的作用是將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 以便引用。
{ "name": "vendor_2beb750db72b1cda4321", "content": { "./node_modules/process/browser.js": { "id": 0, "meta": {} }, "./node_modules/vue-router/dist/vue-router.esm.js": { "id": 1, "meta": { "harmonyModule": true }, "exports": [ "default" ] }, "./node_modules/vue/dist/vue.runtime.esm.js": { "id": 2, "meta": { "harmonyModule": true }, "exports": [ "default" ] }, //.......
最後在 webpack.config.js 中加入參考。在 plugins 屬性中新增 DllReferencePlugin 插件,並指明 manifest.json 檔案的參考路徑。
//... plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./dist/manifest.json') }) ]
在確保成功執行 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) => { if (!err) { var dataStr = data.toString(), timestamp = (new Date()).getTime(); dataStr = dataStr .replace('bundle.js', 'bundle.js?v='+timestamp) .replace('<!-- dll -->', '<script src="./dist/Dll.js?v='+ timestamp +'"></script>'); fs.writeFile('./dist/index.html', dataStr, (error) => { if (!error) { console.log('HTML file copy successfully'); } else { console.log(error); } }); } else { console.log(err); } });
我們需要在模組的入口html 中加入b77a9b994ab1dbd000a29af0dd12365f 的佔位字符,pack .js 的作用是將html 檔案拷貝一份到dist 目錄下,同時將b77a9b994ab1dbd000a29af0dd12365f 替換為引用Dll.js 的script 標籤,並在引用檔案後加上時間戳記。
<!-- .... --> <body> <p id="demo" class="container"></p> <!-- dll --> <script src="./bundle.js"></script> </body> </html>
執行 webpack -p 打包後,輸入下方指令執行 pack.js,就會在 dist 目錄下產生 html 檔案。
$ node pack.js
內容如下:
<!-- .... --> <body> <p id="demo" class="container"></p> <script src="./dist/Dll.js?v=1488250309725"></script> <script src="./bundle.js?v=1488250309725"></script> </body> </html>
這樣dist 資料夾就作為一個完整的、不需要任何手動操作、已經壓縮混淆後的項目可以直接進行線上的部署。
實際項目範本參考位址如下。由於筆者作為 React 與 Vue 的雙持開發者,所以創建了兩個模板,以便之後透過 yomen(yo) 之類的進行腳手架工具化。
相關推薦:
vue、vuecli、webpack中使用mockjs模擬後端資料
以上是webpack效能最佳化的詳細內容。更多資訊請關注PHP中文網其他相關文章!