详解webpack性能优化——DLL

详解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 = {

　　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 (!errslxJS) {

var dataStr = data.toString(),

timestamp = (new Date()).getTime();

dataStr = dataStr

.replace('bundle.js', 'bundle.js?v='+timestamp)

slxJS .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 目录下，同时将 替换为引用 Dll.js 的 script 标签，并在引用文件后添加时间戳。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。