webpack性能优化

webpack性能优化

优化 babel-loader(编译ES6到ES5)

1
2
3
4
5
6
7
{
test: /\.js$/,
use: [loader: 'babel-loader?cacheDirectory' ], #//开启缓存
include: path.resolve(_dirname, 'src'), # // 明确范围
# // exclude: /(node_modules|bower_components)/, //排除
#// 排除范围include和exclude两者选一个即可
},

IgnorePlugin (避免哪些的插件), 直接不引入,代码中没有

例: moment 获取日期插件
引入moment插件,默认会引入所有的语言JS代码,代码过大,
如何只引入中文 ?
index.js

1
2
3
4
5
import moment form 'moment' #//引入moment插件
import 'moment/locale/zh-cn' #//手动引入中文语言包

moment.locale('zh-cn'); #设置语言为中文
console.log(moment().format('ll')); #2020年X月X日

webpack.common.js

1
2
3
4
5
6
module.exports = {
plugins: [
#// 忽略 moment 下的 /locale 目录,(忽略所有的语言包)
new webpack.IgnorePlugin(/\.\/locale/, /moment/),
],
}

noParse ( 不去管哪些,避免重复打包),引入,但不打包

webpack.common.js

1
2
3
4
5
6
7
module.exports = {
module: {
#// 独完整的'react.min.js' 文件就没有采用模块化
#// 忽略对'react.min.js' 文件的递归解析处理
noParse: [/react\.min\.js$/],
}
}

happyPack ( 多进程打包工具,打包更快)

JS单线程,开启多进程打包
提高构建速度 (特别是多核CPU)
webpack.common.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 HappyPack = require('happypack');
module.exports = {
module: {
rules: [
#// js
{
test: /\.js$/,
#// 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
use: ['happypack/loader?id=babel'],
include: srcPath,
#// exclude: /node_modules/
},
]
},
plugins: [
#// happyPack 开启多进程打包
new HappyPack({
#// 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
id: 'babel',
#// 如何处理 .js 文件,用法和 Loader 配置中一样
loaders: ['babel-loader?cacheDirectory']
}),
]
}

ParallelUglifyPlugin ( 多进程代码压缩JS)

webpack 内置Uglify工具压缩JS
JS单线程, 开启多进程压缩更快
webpack.common.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
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
module.exports = {
module: {
rules: [
...
]
},
plugins: [
#// 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
new ParallelUglifyPlugin({
#// 传递给 UglifyJS 的参数
#// (还是使用 UglifyJS 压缩,只不过帮助开启了多进程)
uglifyJS: {
output: {
beautify: false, // 最紧凑的输出
comments: false, // 删除所有的注释
},
compress: {
#// 删除所有的 `console` 语句,可以兼容ie浏览器
drop_console: true,
#// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
#// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
}
}
})
]
}

自动刷新 ( 一保存代码,编译完之后浏览器就自动刷新页面)

1
...

热更新 ( 一保存代码,编译完之后浏览器不用刷新页面,代码就已更新)

1
...

DIlPlugin (把第三方插件事先打包好,做为DIL,之后打包时引用它,不需要每次打包都去打包第三方插件)

1
...