Webpack5优化之提高打包构建速度
文章目录
- 一、HotModuleReplacement
-
- 1.1 为什么
- 1.2 是什么
- 1.3 怎么用
-
- 1.3.1 基本配置
- 1.3.2 JS配置
- 二、OneOf
-
- 2.1 为什么
- 2.2 是什么
- 2.3 怎么用
- 三、Include/Exclude
-
- 3.1 为什么
- 3.2 是什么
- 3.3 怎么用
- 四、Cache
-
- 4.1 为什么
- 4.2 是什么
- 4.3 怎么用
- 五、Thread
-
- 5.1 为什么
- 5.2 是什么
- 5.3 怎么用
-
- 5.3.1 获取CPU核数
- 5.3.2 安装依赖
- 5.3.1 使用
- 六、小结
-
- 6.1 效果
- 6.2 完整配置文件
一、HotModuleReplacement
1.1 为什么
在开发时，我们修改其中一个模块代码，Webpack默认会将所有模块重新打包编译，速度很慢。
我们需要做到修改某个模块代码，就只有这个模块代码重新打包编译，其他模块不变，这样速度就会有很大的提升。
1.2 是什么
HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面
1.3 怎么用
1.3.1 基本配置
在config/webpack.dev.js文件中配置：
//开发服务器
devServer: {
host: '127.0.0.1', // 域名
port: '3000', // 端口
open: true, // 是否自动打开浏览器
hot: true,// 开启HMR功能(只能用于开发环境，生产环境不需要)
},
此时css样式经过style-loader处理，已经具备HMR功能了， 但是js还不支持的
1.3.2 JS配置
在main.js中，开启HMR
// 判断是否支持HMR功能
if (module.hot) {
module.hot.accept('./js/sub.js')
module.hot.accept('./js/sum.js', function (sum) {
console.log('module.hot sum called');
})
}
上面这样写会很麻烦，有多少个js就要配置多少个，所以实际开发我们会使用其他loader来解决。
比如：vue-loader 和 react-hot-loader
二、OneOf
2.1 为什么
打包时每个文件都会经过所有loader处理，虽然test正则原因实际没有处理上，但是都要过一遍，是比较慢的。
2.2 是什么
顾名思义就是只能匹配上一个loader, 剩下的就不匹配了。
2.3 怎么用
修改config/webpack.dev.js和webpack.prod.js，如下：
// 加载器
module: {
rules: [
{
oneOf: [
{
// 匹配css结尾文件
test: /\.css$/,
// loader执行顺序是从右到左
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.styl$/,
use: ["style-loader", "css-loader", "stylus-loader"],
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
parser: {
// 小于10kb的图片转base64
// 优点：减少请求数量 缺点：体积会增大三分之一
dataUrlCondition: {
maxSize: 20 * 1024 // 20kb
}
},
generator: {
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/imgs/[hash:8][ext][query]",
}
},
{
/**
* 处理图标字体、媒体等资源
* type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
*/
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
},
]
}
]
},
三、Include/Exclude
3.1 为什么
开发时我们需要使用第三方的库或插件，所有文件都下载到node_modules中了，而这些文件是不需要编译可以直接使用的。
所以我们在对js文件处理时，要排除node_modules下面的文件。
3.2 是什么
include：包含，只处理xxx文件exclude：排除，除了xxx文件以外其他文件都处理
需要注意的是include和exclude只能二选一
3.3 怎么用
修改config/webpack.dev.js和config/webpack.prod.js，如下：
...
{
test: /\.js$/,
// exclude: /node_modules/, // 排除node_modules代码不编译
include: path.resolve(__dirname, '../src'),
loader: "babel-loader",
},
...
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, '../src'),
exclude: 'node_modules'// 默认值
}),
四、Cache
4.1 为什么
每次打包时js文件都要经过Eslint检查和 Babel编译，速度比较慢。
我们可以缓存之前的Eslint检查和Babel编译结果，这样第二次打包时速度就会更快了。
4.2 是什么
对Eslint检查和Babel编译结果进行缓存。
4.3 怎么用
修改config/webpack.dev.js和config/webpack.prod.js，如下：
...
{
test: /\.js$/,
// exclude: /node_modules/, // 排除node_modules代码不编译
include: path.resolve(__dirname, '../src'),
loader: "babel-loader",
options: {
cacheDirectory: true,// 开启babel编译缓存
cacheCompression: false // 缓存文件不要压缩
}
},
...
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, '../src'),
exclude: 'node_modules',// 默认值
cache: true, // 开启缓存
cacheLocation: path.resolve(__dirname, '../node_modules/.cache/.eslintcache') // 缓存目录
}),
五、Thread
5.1 为什么
当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码，这个速度是比较慢的。
我们想要继续提升打包速度，其实就是要提升js的打包速度，因为其他文件都比较少。
而对js文件处理主要就是eslint、babel、Terser三个工具，所以我们要提升它们的运行速度。
我们可以开启多进程同时处理js文件，这样速度就比之前的单进程打包更快了。
5.2 是什么
多进程打包：开启电脑的多个进程同时干一件事，速度更快。
需要注意：请仅在特别耗时的操作中使用，因为每个进程启动就有大约为600ms左右开销。
5.3 怎么用
我们启动进程的数量就是我们 CPU 的核数。
如何获取 CPU 的核数，因为每个电脑都不一样。
5.3.1 获取CPU核数
修改config/webpack.dev.js和config/webpack.prod.js
// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;
5.3.2 安装依赖
npm i thread-loader -D
5.3.1 使用
修改config/webpack.prod.js
// nodejs核心模块
const os = require('os')
...
const TerserPlugin = require("terser-webpack-plugin");
// cpu核数
const threads = os.cpus().length
...
{
test: /\.js$/,
// exclude: /node_modules/, // 排除node_modules代码不编译
include: path.resolve(__dirname, '../src'),
use: [
{
loader: 'thread-loader',//开启多进程
options: {
workers: threads //数量
}
},
{
loader: "babel-loader",
options: {
cacheDirectory: true,// 开启babel编译缓存
cacheCompression: false // 缓存文件不要压缩
}
}
]
},
...
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, '../src'),
exclude: 'node_modules',// 默认值
cache: true, // 开启缓存
cacheLocation: path.resolve(__dirname, '../node_modules/.cache/.eslintcache'), // 缓存目录
threads,//开启多进程
}),
...
// 配置多进程
new TerserPlugin({
parallel: threads // 开启多进程
})
...
在配置中有css压缩等，借用optimization优化配置
optimization: {
minimize: true,
minimizer: [
// css压缩
new CssMinimizerPlugin(),
// 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
new TerserPlugin({
parallel: threads // 开启多进程
})
]
}
我们目前打包的内容都很少，所以因为启动进程开销原因，使用多进程打包可能让我们打包时间变得很长。
六、小结
6.1 效果
经过如上一系列优化，在该示例项目中前后打包耗时对比如下：
6.2 完整配置文件
config/webpack.prod.js
// nodejs核心模块
const os = require('os')
const path = require('path') // nodejs核心模块，用来处理路径问题
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
// cpu核数
const threads = os.cpus().length
// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
preProcessor,
].filter(Boolean);
};
module.exports = {
// 入口
entry: './src/main.js',
// 输出
output: {
// 文件输出路径
// __dirname nodejs变量，代表当前文件的文件夹目录
path: path.resolve(__dirname, '../dist'),
// 入口文件打包输出文件名
filename: 'static/js/main.js',
clean: true, // 自动将上次打包目录资源清空
},
// 加载器
module: {
rules: [
{
oneOf: [
{
// 匹配css结尾文件
test: /\.css$/,
// loader执行顺序是从右到左
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.styl$/,
use: ["style-loader", "css-loader", "stylus-loader"],
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
parser: {
// 小于10kb的图片转base64
// 优点：减少请求数量 缺点：体积会增大三分之一
dataUrlCondition: {
maxSize: 20 * 1024 // 20kb
}
},
generator: {
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/imgs/[hash:8][ext][query]",
}
},
{
/**
* 处理图标字体、媒体等资源
* type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
*/
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},
{
test: /\.js$/,
// exclude: /node_modules/, // 排除node_modules代码不编译
include: path.resolve(__dirname, '../src'),
use: [
{
loader: 'thread-loader',//开启多进程
options: {
workers: threads //数量
}
},
{
loader: "babel-loader",
options: {
cacheDirectory: true,// 开启babel编译缓存
cacheCompression: false // 缓存文件不要压缩
}
}
]
},
]
}
]
},
// 插件
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, '../src'),
exclude: 'node_modules',// 默认值
cache: true, // 开启缓存
cacheLocation: path.resolve(__dirname, '../node_modules/.cache/.eslintcache'), // 缓存目录
threads,//开启多进程
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, '../public/index.html'),
inject: 'head'
}),
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
// css压缩也可以写到optimization.minimizer里面，效果一样的
// new CssMinimizerPlugin(),
// 配置多进程
// new TerserPlugin({
// parallel: threads // 开启多进程
// })
],
optimization: {
minimize: true,
minimizer: [
// css压缩
new CssMinimizerPlugin(),
// 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
new TerserPlugin({
parallel: threads // 开启多进程
})
]
},
//开发服务器
// devServer: {
// host: '127.0.0.1', // 域名
// port: '3000', // 端口
// open: true, // 是否自动打开浏览器
// hot: true // 开启HMR
// },
// 模式
mode: 'production',
devtool: "source-map",
}