1. 优化原理和目标
诊断并分析性能瓶颈，有针对性的提升构建速度和用户的访问性能
诊断方法：
-
构建速度：提升团队开发效率
-
构建体积：提升页面访问速度
优化方案：
-
使用多线程优化构建速度
-
使用分包减少构建体积
-
减少构建目标提升构建速度
2. 分析构建速度-测量插件 speed-measure-webpack-plugin
https://github.com/stephencookdev/speed-measure-webpack-plugin
介绍：
显示每个loader和plugin的执行时间，将比较耗时的用红色标记出来
安装：
npm install speed-measure-webpack-plugin -D
使用：
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const webpackConfig = smp.wrap({
plugins: [new MyPlugin(), new MyOtherPlugin()],
});
3. 构建体积检测插件 webpack-bundle-analyzer
https://github.com/webpack-contrib/webpack-bundle-analyzer
介绍：
webpack-bundle-analyzer是webpack的插件，需要配合webpack和webpack-cli⼀起使⽤。这个插件可以读取output⽂件夹中的stats.json⽂件，把该⽂件可视化展现，⽣成代码分析报告，可以直观地分析打包出的⽂件有哪些，及它们的⼤⼩、占⽐情况、各⽂件 Gzipped 后的⼤⼩、模块包含关系、依赖项等。
安装：
npm install --save-dev webpack-bundle-analyzer
使用：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
plugins: [new BundleAnalyzerPlugin()]
}
通过分析图可以帮助我们：
-
了解bundle包中真正的内容
-
找出哪些模块尺寸最大
-
查找误引入的模块
-
优化项目
4. 构建性能优化之多进程 thread-loader
4.1 多进程 thread-loader
https://github.com/webpack-contrib/thread-loader
介绍：
Webpack的构建过程涉及到⼤量的⽂件读写操作，系统的I/O操作是⼗分耗时的，当要操作的⽂件数量变多的时候，Webpack的构建速度也会相应的变慢。由于JavaScript是单线程运⾏的，只能⼀个⼀个的排队处理任务，不能同时处理多个任务。像Java那样使⽤多线程进⾏任务处理显然是不可能的，因此thread-loader使⽤多进程来并发去处理任务，⼦进程处理完成后将结果再返回给主进程，从⽽提升了构建效率。
注意：
-
thread-loader应该放到其他loader前
-
每个 worker 都是⼀个独⽴的 node.js 进程，其开销⼤约为 600ms 左右。同时会限制跨进程的数据交换。
-
请仅在耗时的操作中使⽤此 loader
运行在worker池中的loader的限制：
-
不能生成新的文件
-
不能使用自定义的loader API (也就是说，不能通过插件来自定义)
-
无法获取webpack的配置
安装：
npm install --save-dev thread-loader
使用：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
include: path.resolve('src'),
use: [
'thread-loader',
// your expensive loader (e.g babel-loader)
],
},
],
},
};
4.2 多进程-并行压缩- tenser-webpack-plugin
https://github.com/webpack-contrib/terser-webpack-plugin
使用：开启parallel参数
5. 分包和模板的自动引用
分包：在 webpack 打包过程中，经常出现 vendor.js， app.js 单个⽂件较⼤的情况，这偏偏⼜是⽹⻚最先加载的⽂件，这就会使得加载时间过⻓，从⽽使得⽩屏时间过⻓，影响⽤户体验。因此我们需要将打包⽂件进⼀步优化 - 分包。把变化⼏率很⼩的第三⽅库抽离出来，提前打包好，使⽤DllPlugin进⾏分包。
分包原则：
-
降低单个包的文件大小
-
将第三方库分离出来
实现步骤：
- 分包：定义webpack.dll.js，使用DllPlugin配置分包
const path = require('path')
const webpack = require('webpack')
module.exports = {
mode: 'production',
entry: {
react: [
'react',
'react-dom'
]
},
output: {
filename: '[name].dll.js',
path: path.join(__dirname, 'dll'),
library: '[name]_[hash]'
},
plugins: [
new webpack.DllPlugin({
name: '[name]_[hash]',
path: path.join(__dirname, 'dll/[name]-manifest.json'),
})
]
}
- 排除分包：在config中，使用DllReferencePlugin引用manifest文件排除分包
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: path.resolve(__dirname, './dll/react-manifest.json')
}),
]
- 引用dll：使用add-asset-html-webpack-plugin引用分包文件
https://github.com/SimenB/add-asset-html-webpack-plugin
注意：
SpeedMeasurePlugin和AddAssetHtmlPlugin一起使用，会导致dll.js文件自动导入失败，所以，在使用AddAssetHtmlPlugin的时候，将SpeedMeasurePlugin的disable改为true
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, './dll/react.dll.js'),
publicPath: '', // 否则在html中引入的的路径会有一个auto
})
6. 使用缓存提升打包性能
https://webpack.docschina.org/configuration/cache/#root
目的： 提升二次构建速度
思路：
-
babel-loader 开启缓存
-
设置cache选项
6.1 babel-loader 开启缓存
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
}
6.2 设置cache选项
cache: {
type: 'filesystem',
allowCollectingMemory: true,
},
7. 缩小构建目标
目的：缩小构建目标 (比如 babel-loader 不解析 node_modules)
7.1 babel-loader 只解析src
{
test: /.js$/,
include: path.resolve('src'),
use: [
{
loader: 'thread-loader',
options: {
workers: 3,
}
},
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
},
7.2 修改resolve的参数
resolve: {
alias: {
'react': path.resolve(__dirname, './node_modules/react/umd/react.production.min.js'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom/umd/react-dom.production.min.js')
},
extensions: ['.js'],
mainFields: ['main']
}
8. 图片压缩 image-minimizer-webpack-loader
https://github.com/webpack-contrib/image-minimizer-webpack-plugin/
9. CSS优化 purgecss-webpack-plugin
https://github.com/FullHuman/purgecss/tree/main/packages/purgecss-webpack-plugin
介绍：
在⼤型项⽬中，经常会有很多样式内容，在代码中根本未使⽤，但是会被打包，这些样式在打包时应该 移除。 使⽤purgecss-webpack-plugin移除未使⽤的css样式
使用：
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin")
const PATHS = {
src: path.join(__dirname, "src"),
}
plugins: [
new PurgeCSSPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
})
]
注意：purgecss-webpack-plugin需要和mini-css-extract-plugin一起使用
10. 使用高版本的webpack和node.js
更高版本的webpack和nodejs，性能更加优越
上述是针对webpack5的性能优化分析，如有错误之处，请指正～
网友评论