溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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 = {
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 中添加 <!-- dll --> 的占位字符，pack.js 的作用就是將 html 文件拷貝一份到 dist 目錄下，同時將 <!-- dll --> 替換為引用 Dll.js 的 script 標簽，并在引用文件后添加時間戳。
<!-- .... --> <body> <div id="demo" class="container"></div> <!-- dll --> <script src="./bundle.js"></script> </body> </html>
在執行 webpack -p 打包后，輸入下面命令運行 pack.js，就會在 dist 目錄下生成 html 文件。
$ node pack.js
內容如下：
<!-- .... --> <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) 之類的進行腳手架工具化。
https://github.com/Darylxyx/generator-yx-react
https://github.com/Darylxyx/generator-yx-vue
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
