webpack5高级优化——提升打包速度
Posted 天界程序员
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack5高级优化——提升打包速度相关的知识,希望对你有一定的参考价值。
由于随着项目体积的变大,我们的webpack
打包速度也随之变慢,为了改善这一现象我需要对webpack
做一些优化。
1. 热模块替换HMR(HotModuleReplacement)
开发时我们修改了其中一个模块代码,Webpack
默认会将所有模块全部重新打包编译,速度很慢。
所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快。
HotModuleReplacement
(HMR
/热模块替换):在程序运行中,替换、添加或删除模块,而无需重新加载整个页面。
提示
从
webpack-dev-server
v4
开始,HMR
是默认启用的。它会自动应用webpack.HotModuleReplacementPlugin
,这是启用HMR
所必需的。因此当hot
设置为true
或者通过CLI
设置--hot
,你不需要在你的webpack.config.js
添加该插件。查看 HMR concepts page 以获取更多信息。
- 配置使用
文件名:webpack.dev.js
module.exports =
// 其他省略
devServer:
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
hot: true, // 开启HMR功能(只能用于开发环境,生产环境不需要了)
,
;
css
样式文件:可以使用HMR
功能:因为style-loader
内部实现了~
js
文件:默认不能使用HMR
功能 ===> 需要修改js
代码,添加支持HMR
功能的代码
- JS配置
// main.js
import count from "./js/count";
import sum from "./js/sum";
//...
// 判断是否支持HMR功能
if (module.hot)
// 一旦 module.hot 为true,说明开启了HMR功能。 ===> 让HMR功能代码生效
module.hot.accept("./js/count.js", function (count)
// 方法会监听 count.js 文件的变化,一旦发生变化,其他模块不会重新打包构建。
// 会执行后面的回调函数
const result1 = count(2, 1);
console.log(result1);
);
module.hot.accept("./js/sum.js", function (sum)
const result2 = sum(1, 2, 3, 4);
console.log(result2);
);
上面这样写会很麻烦,所以实际开发我们会使用其它 loader
来解决。
比如:vue-loader, react-hot-loader。
- 使用Vue框架:vue-loader
- 使用React框架: react-hot-loader
它们内部已经实现HMR
功能,无需我们单独去一个一个配置。
2. Rule.oneOf
规则
数组,当规则匹配时,只使用第一个匹配规则,顾名思义就是只能匹配上一个 loader, 剩下的就不匹配了。
开发模式与生产模式都是如此配置
文件名:webpack.dev.js
&& webpack.prod.js
module:
rules: [
oneOf: [
// 用来匹配 .css 结尾的文件
test: /\\.css$/,
// use 数组里面 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)$/,
type: "asset",
parser:
dataUrlCondition:
maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
,
,
generator:
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/imgs/[hash:8][ext][query]",
,
,
test: /\\.(ttf|woff2?)$/,
type: "asset/resource",
generator:
filename: "static/media/[hash:8][ext][query]",
,
,
test: /\\.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
,
],
,
],
,
如果有两个文件都需要不同的rule处理的时候把其中一个loader
提取到OneOf
外面,就可以了
比如对于js
文件的eslint-loader
和babel-loader
,我们考虑把先执行的eslint-loader
放到OneOf
的上方就可以了。
示例代码:
module:
rules: [
//eslint检查
//package.json配置"eslintConfig"
test: /\\.js$/,
exclude: /node_modules/,
enforce: "pre", //js优先执行eslint
loader: "eslint-loader",
options:
fix: true, //规范自动修复
,
,
oneOf: [
// 其他loader配置
//js先eslint再babel
//js兼容处理
test: /\\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options:
presets: [
[
"@babel/preset-env",
useBuiltIns: "usage", //按需加载
corejs:
version: 3, //制定core-js版本
,
targets:
//制定兼容的目标
chrome: "60",
firefox: "60",
ie: "9",
safari: "10",
edge: "17",
,
,
],
],
,
,
],
,
],
,
3. Include/Exclude
开发时我们需要使用第三方的库或插件,所有文件都下载到 node_modules
中了。而这些文件是不需要编译可以直接使用的。所以我们在对 js
文件处理时,要排除 node_modules
下面的文件。
- include: 引入符合以下任何条件的模块
- exclude: 排除所有符合条件的模块
开发模式与生产模式都是如此配置
文件名:webpack.dev.js
&& webpack.prod.js
module:
rules: [
oneOf: [
// ... 其他省略
test: /\\.js$/,
// exclude: /node_modules/, // 排除node_modules代码不编译
include: path.resolve(__dirname, "../src"), // 也可以用包含
loader: "babel-loader",
,
],
,
],
,
plugins: [
new ESLintWebpackPlugin(
// 指定检查文件的根目录
context: path.resolve(__dirname, "../src"),
exclude: "node_modules", // 默认值
),
// ... 其他省略
],
4. Cache
每次打包时 js
文件都要经过 Eslint
检查 和 Babel
编译,速度比较慢。
我们可以缓存之前的 Eslint
检查 和 Babel
编译结果,这样第二次打包时速度就会更快了。
详情参照:Webpack5的cache规则
cache
: 缓存生成的webpack
模块和chunk
,来改善构建速度
文件名:webpack.prod.js
//...
test: /\\.js$/,
// exclude: /node_modules/, // 排除node_modules代码不编译
include: path.resolve(__dirname, "../src"), // 也可以用包含
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"
),
),
]
关于缓存第一次打包速度较慢,第二次打包速度较明显,当然这取决于你项目足够大,项目文件小不够明显。
关于babel中的缓存配置项:
- cacheDirectory
默认值为 false
。当有设置时,指定的目录将用来缓存 loader
的执行结果。之后的 webpack
构建,将会尝试读取缓存,来避免在每次执行时,可能产生的、高性能消耗的 Babel
重新编译过程(recompilation process
)。如果设置了一个空值 (loader: 'babel-loader?cacheDirectory'
) 或者 true
(loader: 'babel-loader?cacheDirectory=true'
),loader 将使用默认的缓存目录 node_modules/.cache/babel-loader
,如果在任何根目录下都没有找到 node_modules
目录,将会降级回退到操作系统默认的临时文件目录。
- cacheCompression
默认值为 true
。当设置此值时,会使用 Gzip
压缩每个 Babel transform
输出。如果你想要退出缓存压缩,将它设置为 false
– 如果你的项目中有数千个文件需要压缩转译,那么设置此选项可能会从中收益。
其他配置参考:babel-loader其他配置文档
关于ESlint插件中的缓存配置项:
- cache
默认为false
。如果为true
, eslint.lintFiles()
方法将缓存lint
结果,并在每个目标文件未更改时使用它。请注意,当你升级ESLint
插件时,ESLint
不会清除缓存。在这种情况下,您必须手动删除缓存文件。eslint.lintText()
方法不使用缓存,即使您将options.filePath
传递给该方法。
- cacheLocation
默认值是.eslintcache
。eslint.lintFiles()
方法将缓存写入该文件。
其他配置参考:new-eslintoptions
5. Thread
项目越来越庞大时,打包速度越来越慢,甚至于需要一个下午才能打包出来代码。这个速度是比较慢的。
我们想要继续提升打包速度,其实就是要提升 js 的打包速度,因为其他文件都比较少。
而对 js
文件处理主要就是 eslint
、babel
、Terser
三个工具,所以我们要提升它们的运行速度。
我们可以开启多进程同时处理 js
文件,这样速度就比之前的单进程打包更快了。
多进程打包:开启电脑的多个进程同时干一件事,速度更快。
需要注意:请仅在特别耗时的操作中使用,因为每个进程启动就有大约为 600ms 左右开销。
我们启动进程的数量就是我们 CPU 的核数。
- 获取 CPU 的核数,因为每个电脑都不一样
/ nodejs核心模块,直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;
- 下载包
npm i thread-loader -D
- 配置使用
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编译缓存
,
,
],
,
// ...
plugins: [
new ESLintWebpackPlugin(
//...
threads, // 开启多进程
),
// ....
],
optimization:
minimize: true,
minimizer: [
// css压缩也可以写到optimization.minimizer里面,效果一样的
new CssMinimizerPlugin(),
// 当生产模式会默认开启TerserPlugin,但是我们需要进行其他配置,就要重新写了
new TerserPlugin(
parallel: threads // 开启多进程
)
],
,
我们目前打包的内容都很少,所以因为启动进程开销原因,使用多进程打包实际上会显著的让我们打包时间变得很长。
完整的配置
const os = require("os");
const path = require("path");
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:
path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
clean: true,
,
module:
rules: [
oneOf: [
// 用来匹配 .css 结尾的文件
test: /\\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: getStyleLoaders(),
,
test: /\\.less$/,
use: getStyleLoaders("less-loader"),
,
test: /\\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
,
test: /\\.styl$/,
use: getStyleLoaders("stylus-loader"),
,
test: /\\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser:
dataUrlCondition:
maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
,
,
generator:
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/imgs/[hash:8][ext][query]",
,
,
test: /\\.(ttf|woff2?)$/,
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编译缓存
,
,
],
,
],
,
],
,
plugins: [
new ESLintWebpackPlugin(
// 指定检查文件的根目录
context: path.resolve(__dirname, "../src"),
exclude: "node_modules", // 默认值
cache: true, // 开启缓存
// 缓存目录
cacheLocation: path.resolve(
__dirname,
"../node_modules/.cache/.eslintcache"
),
threads, // 开启多进程
),
new HtmlWebpackPlugin(
以上是关于webpack5高级优化——提升打包速度的主要内容,如果未能解决你的问题,请参考以下文章