详解如何提高 webpack 构建 Vue 项目的速度
前言
最近有人给我的Vue2后台管理系统解决方案提了issue，说执行npmrunbuild构建项目的时候极其慢，然后就引起我的注意了。在项目中，引入了比较多的第三方库，导致项目大，而每次修改，都不会去修改到这些库，构建却都要再打包这些库，浪费了不少时间。所以，把这些不常变动的第三方库都提取出来，下次build的时候不再构建这些库，这样既可大大缩短构建时间。那么要怎么去实现呢？
解决方案
DllPlugin和DllReferencePlugin
查找了一下资料，发现我们可以利用webpack的插件DllPlugin和DllReferencePlugin来实现我们要的功能。
DllPlugin可以把我们需要打包的第三方库打包成一个js文件和一个json文件，这个json文件中会映射每个打包的模块地址和id，DllReferencePlugin通过读取这个json文件来使用打包的这些模块。
接下来就看如何实现。
配置文件
在build文件夹中新建webpack.dll.config.js(项目基于vue-cli的)
constpath=require('path');
constwebpack=require('webpack');
module.exports={
entry:{
vendor:['vue/dist/vue.common.js','vue-router','babel-polyfill','axios','vue-echarts-v3']
},
output:{
path:path.join(__dirname,'../static/js'),
filename:'[name].dll.js',
library:'[name]_library'//vendor.dll.js中暴露出的全局变量名
},
plugins:[
newwebpack.DllPlugin({
path:path.join(__dirname,'.','[name]-manifest.json'),
name:'[name]_library'
}),
newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
})
]
};
然后在package.json中配置命令
"scripts":{
...
"build:dll":"webpack--configbuild/webpack.dll.conf.js"
}
执行npmrunbuild:dll命令来生成vendor.dll.js和vendor-manifest.json
需要在index.html引入vendor.dll.js
vendor-manifest.json的内容大概如下：
{
"name":"vendor_library",
"content":{
"./node_modules/core-js/modules/_export.js":{
"id":0,
"meta":{}
},
...
}
接下来就在webpack.base.config.js中通过DLLReferencePlugin来使用DllPlugin生成的DLLBundle
varwebpack=require('webpack');
module.exports={
entry:{
app:['./src/main.js']
},
module:{
...
}
//添加DllReferencePlugin插件
plugins:[
newwebpack.DllReferencePlugin({
context:path.resolve(__dirname,'..'),
manifest:require('./vendor-manifest.json')
}),
]
}
原先build需要95446ms，配置之后执行build只需14360ms，减少了75%的时间。
但是存在一个问题，当把太多的第三方依赖都打包到vendor.dll.js中去，该文件太大也会影响首屏加载时间。所以要权衡利弊，可以异步加载的插件就没有必要打包进来了，不要一味的把所有都打包到这里面来获取构建时的快感。
示例地址：vue-manage-system
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。