1、speed-measure-webpack-plugin
speed-measure-webpack-plugin
插件可以作为一个webpack打包量化的指标,帮助我们在打包webpack时看到之前操作的优化到底是负优化还是正优化。
npm install speed-measure-webpack-plugin -D
修改webpack.config.js
文件:
const SpeedMesureWebpackPlugin = require("speed-measure-webpack-plugin");
const smwp=new SpeedMesureWebpackPlugin();
const configs={
//把之前配置在module.exports里的mode、entry、output、module、plugins、devServer、devtool、performance、resolve的属性都移动到configs里
};
module.exports = smwp.wrap(configs);
最后npm run build
时可以看到量化的
npm run dev
也可以看到
2、exclude/include
exclude/include
确保转译尽可能少的文件。exclude
是指排除文件,include
是指包含文件。exclude
的优先级高于 include
,在 include
和 exclude
中要使用绝对路径数组,尽量避免使用 exclude
,更倾向使用 include
。
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
use: ["babel-loader"],
exclude: /node_modules/,
include:[path.resolve(__dirname,'src')]
},
]
},
}
未进行include
配置时SMP为3.8sesc
3、cache-loader
在一些性能开销较大的 loader 之前添加 cache-loader
,可以将结果缓存在磁盘中,从而实现打包优化。
npm install cache-loader -D
修改webpack.config.js
的配置,在所有use数组里都添加cache-loader
。
注:添加cache-loader
后第一次npm run build
时,npm run build
的SMP会比之前运行的时间都要长,当第二次运行时,就会大大缩短SMP的时间。
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
use: ["cache-loader","babel-loader"],
exclude: /node_modules/,
include:[path.resolve(__dirname,'src')]
},
]
},
}
添加cache-loader
后的第一次npm run build
:
添加cache-loader
后的第二次npm run build
:
如果只打算给babel-loader
添加cache
的话,可以不添加cache-loader
,可以给babel-loader
增加cacheDirectory
。cacheDirectory
默认为false,当有设置cacheDirectory
时,会有指定的目录来缓存 loader 的执行结果。设置为true的话会使用默认缓存目录缓存loader的执行结果。
4、happypack
happypack可以让 webpack 同一时刻处理多个任务(即把任务分解给多个子进程去并发执行,子进程处理完后再把结果发送给主进程),发挥多核 CPU 电脑的威力,以提升构建速度。
npm install happypack -D
修改webpack.config.js
文件
const HappyPack = require("happypack");
const configs = {
module: {
rules: [
{
test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
use: "HappyPack/loader?id=file",
exclude: /node_modules/
}
]
},
plugins: [
new HappyPack({
id: "file",
use: [
"cache-loader",
{
loader: "url-loader",
options: {
limit: 10240,
esModule: false,
name: "[name]_[hash:6].[ext]",
outputPath: "assets"
}
}
]
})
],
};
注:use
的修改就相当于在rules
的use
设置一个识别new HappyPack
的id的字符串,new HappyPack
里的use就是之前存在于rules里面的use。
注:当项目不复杂时不需要配置 happypack,因为进程的分配和管理也需要时间,当项目不复杂时并不能有效提升构建速度,甚至会变慢,本项目就变慢了。
当然npm run build
多了之后,SMP就会减小。
5、thread-loader
除了使用 HappyPack
外,我们也可以使用 thread-loader
。 thread-loader
的使用就是只需把他放置在其它 loader
之前,那么放置在这个 loader
之后的 loader 就会在一个单独的 worker
池中运行。
npm install thread-loader -D
修改webpack.config.js
文件:
```javascript
const HappyPack = require("happypack");
const configs = {
module: {
rules: [
{
test: /\.jsx?$/,
use: ["thread-loader","cache-loader", "babel-loader"],
exclude: /node_modules/,
include: [path.resolve(__dirname, "src")]
},
};
6、JS 多进程压缩
当前 webpack
默认使用的 TerserWebpackPlugin
就已经开启了多进程和缓存。虽然很多 webpack
优化的文章上会提及多进程压缩的优化,不管是 webpack-parallel-uglify-plugin
或者是 uglifyjs-webpack-plugin
配置 parallel
。其实没必要单独安装这些插件因为它们并不会让我们webpack
的构建速度提升。
7、HardSourceWebpackPlugin
HardSourceWebpackPlugin为模块提供中间缓存,第一次运行的时候可能时间没有多大变化,但是到第二次时运行的时间就会快很多。
npm install hard-source-webpack-plugin -D
修改webpack.config.js
文件:
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
const configs = {
plugins: [
new HardSourceWebpackPlugin()
],
};
npm run build
时第一次的SMP会和第二次的SMP相差甚远:
- 第一次
npm run build
- 第二次
npm run build
8、noParse
像jQuery
、lodash
这种没有CommonJS
/AMD
规范版本的第三方模块,可以使用noParse
去标识这些模块,这样webpack
就不会对这些模块进行转化和解析,从而提高webpack
打包的速度。
module.exports = {
module: {
noParse: /jquery|lodash/
}
}
9、resolve
resolve
配置 webpack
如何寻找模块所对应的文件
10、IgnorePlugin
IgnorePlugin
是webpack
的内置插件,忽略第三方包指定目录
module.exports = {
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]
}
同样也是第一次打包时SMP和原来比没有什么变化甚至变长,但是当第二次打包时SMP会缩短。
11、externals
我们通常通过使用import
引入第三方库,但是我们可以通过在index.html
页面以script
方式引入第三方库,也就是将js
存储在CDN
上,这样就可以减少webpack
打包出来的体积。
此时我们把Vue
存储在CDN
上:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>login</title>
</head>
<body>
<div>login</div>
<script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
</body>
</html>
再在webpack.config.js
文件中配置externals
module.exports = {
externals: {
vue: "vue"
}
}
12、DllPlugin
如果把所有的js文件都打包成一个js文件,那会导致最终生成的js文件变得很大,所以我们要对bundles
进行拆分
详情可查看我搭建的webpackTest