Vue.js - 提高项目build打包速度（webpack构建性能优化技巧汇总）
如果我们的 Vue 项目比较大．或者说项目中引入了许多第三方库，那么在执行 npm run build 构建项目的时候会极其的慢．比如我现在的项目就每次打包就要 83s。
下面是我整理的一些优化技巧，可以有效地提高打包速度。
一、配置 resolve.modules
1，优化原理
（1）webpack 的 resolve.modules 是用来配置模块库（即 node_modules）所在的位置。当 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时，它便会到 node_modules 目录下去找。
（2）在默认配置下，webpack 会采用向上递归搜索的方式去寻找。但通常项目目录里只有一个 node_modules，且是在项目根目录。为了减少搜索范围，可我们以直接写明 node_modules 的全路径。
2，操作步骤
（1）打开 build/webpack.base.conf.js 文件，添加如下高亮配置：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
module.exports = {
resolve: {
extensions: [
'.js'
,
'.vue'
,
'.json'
],
modules: [
resolve(
'src'
),
resolve(
'node_modules'
)
],
alias: {
'vue$'
:
'vue/dist/vue.esm.js'
,
'@'
: resolve(
'src'
),
}
},
|
（2）保存后再次构建项目，可以发现时间缩短了 13s 左右。
二、配置装载机的 include & exclude
1，优化原理
（1）webpack 的装载机（loaders）里的每个子项都可以有 include 和 exclude 属性：
- include：导入的文件将由加载程序转换的路径或文件数组（把要处理的目录包括进来）
- exclude：不能满足的条件（排除不处理的目录）
（2）我们可以使用 include 更精确地指定要处理的目录，这可以减少不必要的遍历，从而减少性能损失。
（3）同时使用 exclude 对于已经明确知道的，不需要处理的目录，予以排除，从而进一步提升性能。
2，操作步骤
（1）打开 build/webpack.base.conf.js 文件，添加如下高亮配置：
（2）保存后再次构建项目，可以发现时间又缩短了 2s 左右。
第 7 行的 easytable 如果项目没用到可以把它从 include 中去除。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
module: {
rules: [
{
test: /\.vue$/,
loader:
'vue-loader'
,
options: vueLoaderConfig,
include: [resolve(
'src'
), resolve(
'node_modules/vue-easytable/libs'
)],
exclude: /node_modules\/(?!(autotrack|dom-utils))|vendor\.dll\.js/
},
{
test: /\.js$/,
loader:
'babel-loader'
,
include: [resolve(
'src'
)],
exclude: /node_modules/
},
|
（2）保存后再次构建项目，可以发现时间又缩短了 2s 左右。
三、使用 webpack-parallel-uglify-plugin 插件来压缩代码
1，优化原理
（1）默认情况下 webpack 使用 UglifyJS 插件进行代码压缩，但由于其采用单线程压缩，速度很慢。
（2）我们可以改用 webpack-parallel-uglify-plugin 插件，它可以并行运行 UglifyJS 插件，从而更加充分、合理的使用 CPU 资源，从而大大减少构建时间。
2，操作步骤
（1）执行如下命令安装 webpack-parallel-uglify-plugin
|
1
|
npm i webpack-parallel-uglify-plugin
|
（2）打开 build/webpack.prod.conf.js 文件，并作如下修改：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
const ParallelUglifyPlugin = require(
'webpack-parallel-uglify-plugin'
);
//....
// 删掉webpack提供的UglifyJS插件
//new UglifyJsPlugin({
// uglifyOptions: {
// compress: {
// warnings: false
// }
// },
// sourceMap: config.build.productionSourceMap,
// parallel: true
//}),
// 增加 webpack-parallel-uglify-plugin来替换
new
ParallelUglifyPlugin({
cacheDir:
'.cache/'
,
uglifyJS:{
output: {
comments:
false
},
compress: {
warnings:
false
}
}
}),
|
（3）保存后再次构建项目，可以发现时间又缩短了 55s 左右。
四、使用 HappyPack 来加速代码构建
1，优化原理
（1）由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情只能一件一件地做，不能多件事一起做。
（2）而 HappyPack 的处理思路是：将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展多进程模式，从而加速代码构建。
2，操作步骤
（1）执行如下命令安装 happypack：
|
1
|
npm i happypack
|
（2）打开 build/webpack.base.conf.js 文件，并作如下修改：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
const HappyPack = require(
'happypack'
);
const os = require(
'os'
);
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports = {
module: {
rules: [
{
test: /\.js$/,
//把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
loader:
'happypack/loader?id=happyBabel'
,
include: [resolve(
'src'
)],
//排除node_modules 目录下的文件
exclude: /node_modules/
},
]
},
plugins: [
new
HappyPack({
//用id来标识 happypack处理那里类文件
id:
'happyBabel'
,
//如何处理 用法和loader 的配置一样
loaders: [{
loader:
'babel-loader?cacheDirectory=true'
,
}],
//共享进程池
threadPool: happyThreadPool,
//允许 HappyPack 输出日志
verbose:
true
,
})
]
}
|
五、利用 DllPlugin 和 DllReferencePlugin 预编译资源模块
1，优化原理
（1）我们的项目依赖中通常会引用大量的 npm 包，而这些包在正常的开发过程中并不会进行修改，但是在每一次构建过程中却需要反复的将其解析，而下面介绍的两个插件就是用来规避此类损耗的：
- DllPlugin 插件：作用是预先编译一些模块。
- DllReferencePlugin 插件：它的所用则是把这些预先编译好的模块引用起来。
（2）注意：DllPlugin 必须要在 DllReferencePlugin 执行前先执行一次，dll 这个概念应该也是借鉴了 windows 程序开发中的 dll 文件的设计理念。
2，操作步骤
（1）在 build 文件夹中新建 webpack.dll.conf.js 文件，内容如下（主要是配置下需要提前编译打包的库）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
const path = require(
'path'
);
const webpack = require(
'webpack'
);
module.exports = {
entry: {
vendor: [
'vue/dist/vue.common.js'
,
'vue-router'
,
'axios'
,
'mint-ui'
,
'vue-cordova'
,
'@fortawesome/fontawesome-svg-core'
,
'@fortawesome/free-solid-svg-icons'
,
'@fortawesome/free-regular-svg-icons'
,
'@fortawesome/free-brands-svg-icons'
,
'@fortawesome/vue-fontawesome'
]
},
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
}
})
]
};
|
|
1
2
3
4
5
6
7
8
9
10
11
12
|
{
"name"
:
"ddjk_vue"
,
"version"
:
"1.0.0"
,
"description"
:
"A Vue.js project"
,
"author"
:
"Boss"
,
"private"
:
true
,
"scripts"
: {
"dev"
:
"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
,
"start"
:
"npm run dev"
,
"build"
:
"node build/build.js"
,
"build:dll"
:
"webpack --config build/webpack.dll.conf.js"
},
|
（3）接着执行 npm run build:dll 命令来生成 vendor.dll.js。
注意：如果之后这些需要预编译的库又有变动，则需再次执行 npm run build:dll 命令来重新生成 vendor.dll.js
（4）index.html 这边将 vendor.dll.js 引入进来。
|
1
2
3
4
|
<
body
>
<
div
id
=
"app"
></
div
>
<
script
src
=
"./static/js/vendor.dll.js"
></
script
>
</
body
>
|
（5）打开 build/webpack.base.conf.js 文件，编辑添加如下高亮配置，作用是通过 DLLReferencePlugin 来使用 DllPlugin 生成的 DLL Bundle。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const webpack = require(
'webpack'
);
module.exports = {
context: path.resolve(__dirname,
'../'
),
entry: {
app:
'./src/main.js'
},
//.....
plugins: [
// 添加DllReferencePlugin插件
new
webpack.DllReferencePlugin({
context: path.resolve(__dirname,
'..'
),
manifest: require(
'./vendor-manifest.json'
)
}),
]
}
|
评论
（0）
提交
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_2105.html
