详解如何提高 webpack 构建 Vue 项目的速度

发布时间：2020-12-17 02:54:04 所属栏目：百科来源：网络整理

导读：前言最近有人给我的 Vue2 后台管理系统解决方案提了 issue ，说执行 npm run build 构建项目的时候极其慢，然后就引起我的注意了。在项目中，引入了比较多的第三方库，导致项目大，而每次修改，都不会去修改到这些库，构建却都要再打包这些库，浪费了不少

前言

最近有人给我的 Vue2 后台管理系统解决方案提了 issue ，说执行 npm run build 构建项目的时候极其慢，然后就引起我的注意了。在项目中，引入了比较多的第三方库，导致项目大，而每次修改，都不会去修改到这些库，构建却都要再打包这些库，浪费了不少时间。所以，把这些不常变动的第三方库都提取出来，下次 build 的时候不再构建这些库，这样既可大大缩短构建时间。那么要怎么去实现呢？

解决方案

DllPlugin 和 DllReferencePlugin

查找了一下资料，发现我们可以利用 webpack 的插件 DllPlugin 和 DllReferencePlugin 来实现我们要的功能。

DllPlugin 可以把我们需要打包的第三方库打包成一个 js 文件和一个 json 文件，这个 json 文件中会映射每个打包的模块地址和 id，DllReferencePlugin 通过读取这个json文件来使用打包的这些模块。

接下来就看如何实现。

配置文件

在 build 文件夹中新建 webpack.dll.config.js (项目基于 vue-cli 的)

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: [
new webpack.DllPlugin({
path: path.join(__dirname,'.','[name]-manifest.json'),name: '[name]_library'
}),new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};

然后在 package.json 中配置命令

执行 npm run build:dll 命令来生成 vendor.dll.js 和 vendor-manifest.json

需要在 index.html 引入 vendor.dll.js