建站
咨詢
售后
建站咨詢
新聞中心
Webpack性能優(yōu)化的方式有很多種，本文之所以將 dll 單獨(dú)講解，是因?yàn)?dll 是一種最簡單粗暴并且極其有效的優(yōu)化方式。
創(chuàng)新互聯(lián)成立于2013年，我們提供高端成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)公司、網(wǎng)站定制、網(wǎng)絡(luò)營銷推廣、成都小程序開發(fā)、微信公眾號開發(fā)、成都網(wǎng)站推廣服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計(jì)、程序開發(fā)來完成項(xiàng)目落地，為成都石雕企業(yè)提供源源不斷的流量和訂單咨詢。
在通常的打包過程中，你所引用的諸如：jquery、bootstrap、react、react-router、redux、antd、vue、vue-router、vuex 等等眾多庫也會(huì)被打包進(jìn) bundle 文件中。由于這些庫的內(nèi)容基本不會(huì)發(fā)生改變，每次打包加入它們無疑是一種巨大的性能浪費(fèi)。
Dll 的技術(shù)就是在第一次時(shí)將所有引入的庫打包成一個(gè) dll.js 的文件，將自己編寫的內(nèi)容打包為 bundle.js 文件，這樣之后的打包只用處理 bundle 部分。
以一個(gè) Vue 項(xiàng)目為例，首先創(chuàng)建一個(gè)名為 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
})
]
};
這個(gè)文件的作用是將 vue、vue-router 以及 vuex 合并打包為一個(gè)名為 Dll.js 的靜態(tài)資源包，同時(shí)生成一個(gè) manifest.json 文件方便對 Dll.js 中的模塊進(jìn)行引用。
要注意的是，執(zhí)行 webpack 命令是默認(rèn)執(zhí)行該目錄下名為 webpack.config.js 或者 webpackfile.js 的文件。所以需要通過 --config 指令手動(dòng)指定該文件，最后加入 -p 指令將 Dll.js 壓縮。
$ webpack --config webpack.dll.config.js -p
這樣，在項(xiàng)目根目錄下就會(huì)多增加一個(gè) dist 文件夾，其中有壓縮之后的 Dll.js 與 manifest.json 文件。
manifest.json 文件內(nèi)容如下，給各個(gè)模塊賦予 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')
})
]
在確保成功執(zhí)行 webpack.dll.config.js 文件后，執(zhí)行 webpack -p 進(jìn)行項(xiàng)目打包。
.jpg)
可以看到打包在 Dll 文件中的文件都被 delegated(委派) ，而不是直接打進(jìn) bundle 文件中。
這樣我們就將所有的資源完成打包，生成的 dist 目錄如下：
不過 dist 文件夾要想作為一個(gè)完整的工程還少一個(gè) html 文件，我創(chuàng)建了一個(gè)名為 pack.js 的文件，使用 nodejs 的 fileSystem 對 html 文件進(jìn)行修改并拷貝。
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('', '');
fs.writeFile('./dist/index.html', dataStr, (error) => {
if (!error) {
console.log('HTML file copy successfully');
} else {
console.log(error);
}
});
} else {
console.log(err);
}
});
我們需要在模塊的入口 html 中添加 的占位字符，pack.js 的作用就是將 html 文件拷貝一份到 dist 目錄下，同時(shí)將 替換為引用 Dll.js 的 script 標(biāo)簽，并在引用文件后添加時(shí)間戳。