开发时每做一次修改,很快就能编译完、构建好。这就是优化打包构建速度,提高开发体验和效率。
1、优化babel-loader
babel编译es6到es5还是消耗比较多的。
- 开启缓存
加了一个?cacheDirectory参数
只要是es6代码没有改的,启用缓存,就不会再重新编译 - 明确范围
通过include或exclude来确定范围,一般include和exclude两个中只写一个就可以了。
{
test: /\.js$/,
loader: ['babel-loader?cacheDirectory'],
include: srcPath,
// exclude: /node_modules/
}
2、IgnorePlugin
3、noParse
4、happyPack
多进程打包工具
JS是单线程的,开启多进程打包;
对于多核cpu,提高构建速度
1、首先需要安装happypack
然后引用进来
const HappyPack = require('happypack')
2、更改babel-loader写法
更改babel-loader这个loader的写法,
把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
{
test: /\.js$/,
use: ['happypack/loader?id=babel'],
include: srcPath,
// exclude: /node_modules/
},
那么 id 为 babel 的 HappyPack 实例在哪里呢
3、增加插件
new一个 happyPack实例, 开启多进程打包
为它定义一个唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件,在第二步中使用这个id;
如何处理 .js 文件,用法和 Loader 配置中一样。
plugins: [
new HappyPack({
id: 'babel',
loaders: ['babel-loader?cacheDirectory']
}),
]
5、ParalleIUglifyPlugin
用来开启多进程,压缩JS代码
1、首先安装插件webpack-parallel-uglify-plugin
然后引用
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
2、使用
没有其它配置,在plugins中new一个插件实例
new这个插件的时候传入配置对象。
plugins: [
new ParallelUglifyPlugin({
// 传递给 UglifyJS 的参数
// (还是使用 UglifyJS 压缩,只不过帮助开启了多进程)
uglifyJS: {
output: {
beautify: false, // 最紧凑的输出
comments: false, // 删除所有的注释
},
compress: {
// 删除所有的 `console` 语句,可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
}
}
})
]
注:
- happypack可以放在开发阶段使用,也可以放在生成阶段使用。
而ParallelUglifyPlugin只能放在生成阶段使用了,因为开发阶段没有必要去做代码的压缩。 - 如果项目较大,打包较慢,开启多进程能提高速度。
- 如果项目较小,打包本来就很快,开启多进程会降低速度,因为进程开销。这种情况就不要启动多进程打包。
6、自动刷新
自动刷新是针对开发环境而言的。生成环境没有自动刷新。
代码改完之后一保存,浏览器会自动刷新。不用自己刷新浏览器。
使用devServer会默认开启自动刷新
devServer项与plugins平级
7、热更新
热更新也是针对开发环境而言的。
自动刷新与热更新的区别:
自动刷新是:
- 整个网页全部刷新,速度较慢
- 整个网页全部刷新,状态会丢失。
热更新:
新代码生效,网页不刷新,状态不丢失。
使用热更新
1、引用包(不需要安装)
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
2、配置入口
原来是直接引入index.js入口文件地址。
使用热更新,index是一个数组,最后一项才是index文件地址
entry: {
index: [
'webpack-dev-server/client?http://localhost:8080/',
'webpack/hot/dev-server',
path.join(srcPath, 'index.js')
],
},
3、new一个插件实例
plugins: [
new HotModuleReplacementPlugin()
]
4、配置devServer
在devServer中,将hot配置为true
devServer: {
hot: true,
}
5、设置模块监听范围(监听哪些模块)
- module.hot为true,说明在webpack中配置了热更新
- module.hot.accept方法,第一个参数,数组,允许哪些模块进行热更新的监听,只有当这些模块发生变化时才热更新,不在监听范围内的就不是热更新。
- 第二个参数,被监听的模块发生改变后的回调函数
if (module.hot) {
module.hot.accept(['./math'], () => {
})
}
8、DllPlugin
针对一些比较大的第三方插件,没有必要每次构建的时候都构建一遍,可以事先把这些第三方库打包好之后,做一个dll然后来引用它。