Webpack 是一个强大的前端打包工具，但是如果不合理配置，会拖慢页面的加载速度。本文将介绍一些优化实践，帮助您提高页面打开速度。
1. 代码分离
代码分离是优化 webpack 的重要手段之一，目的是将代码分离成多个小的块，实现按需加载，避免加载不必要的代码。
1.1 入口点配置
使用多个入口点或动态导入是实现代码分离的常用方式。其中多个入口点可以使用 entry 配置实现，示例代码如下：
module.exports = {
entry: {
main: './src/index.js',
vendor: './src/vendor.js'
}
}上述代码将会生成两个入口点，一个是 main，另一个是 vendor。其中，main 包含应用程序的主要代码，而 vendor 则包含了所有第三方依赖。
1.2 懒加载
懒加载是指在需要时才加载模块。Webpack 支持使用 import() 异步加载模块，示例代码如下：
-- -------------------- ---- -------
-------- --------------- -
------ --------- ----------------- ----------- -- -------------------------- -- -
------ ---------------
--
-
------------------------------ -- -
-- -- --------- ---- ---------
--上述代码使用 import() 加载名为 component 的模块，异步获取模块后，调用 module.default 获取模块的默认导出。
2. Tree-shaking
Tree-shaking 是指将应用程序的依赖图重构为一个依赖树，并通过静态分析标记哪些代码被使用或未被使用。Webpack 4 默认开启了 Tree-shaking，但是不是所有的模块都支持 Tree-shaking，需要使用 sideEffects 字段配置。
2.1 配置 package.json
在 package.json 文件中添加 sideEffects 字段来告诉 Webpack 哪些模块是有副作用的，这些模块将不会被 Tree-shaking。
{
"name": "my-app",
"sideEffects": ["./src/some-side-effectful-file.js"]
}2.2 模块构建
在编写模块代码时，遵循以下规则可以帮助 Tree-shaking 更好地工作：
- 不要将导出的值赋值给全局对象。
- 减少导出不必要的变量和函数。
2.3 检验 Tree-shaking 提示
如果您想检验 Tree-shaking 是否生效，在项目的 Webpack 配置文件（比如 webpack.config.js）文件中将 optimization 字段中的 usedExports 配置为 true，示例代码如下：
module.exports = {
//...
optimization: {
usedExports: true,
},
};这可以使 Webpack 标记哪些代码已经被使用或未被使用，并进行打印。
3. 优化 CSS
Webpack 配置中的 MiniCssExtractPlugin 插件可用于将 CSS 提取到独立的文件中。除了将 CSS 从 JavaScript 中提取出来，还可以使用以下方法来优化 CSS。
3.1 优化选择器
选择器的数量越多，以及它们的嵌套程度越深，就越难为浏览器构建样式计算树，也就越难快速渲染页面。因此，尽可能简化选择器。
3.2 压缩 CSS
可以使用 cssnano 和 autoprefixer 插件一起压缩 CSS。cssnano 是一个流行的 CSS 压缩工具，autoprefixer 可以自动添加浏览器前缀。
可以在配置文件中添加 postcss-loader 配置以使用这两个插件。
-- -------------------- ---- -------
-------------- - -
-----
------- -
------ -
-
----- ---------
---- -
-- -------- --- ---- -------- -----
-
------- ----------------------------
--
-- ------- --- ---- -------
-
------- -------------
-------- -
-------------- --
--
--
-
------- -----------------
-------- -
-------- -
------------------------
--------------------
------- ----------
---
--
--
--
--
--
--
--
-------- -
--- ----------------------
--------- -------------
---
--
--4. 压缩 JavaScript
压缩 JavaScript 可以减少文件的体积，提高页面的加载速度。Webpack 默认使用 terser-webpack-plugin 来压缩代码，可以直接使用。
module.exports = {
//...
optimization: {
minimizer: [new TerserWebpackPlugin()],
},
};5. 文件缓存
使用文件缓存可以避免重复打包已经打包过的文件。Webpack 4 默认为每个构建分配一个唯一的 hash，但是如果多次构建，这不够用，建议使用 contenthash 生成基于内容的 hash。
output: {
filename: '[name].[contenthash].js',
}6. 提高构建速度
优化页面加载速度的同时，我们也需要关注构建速度。以下是几个提高构建速度的技巧。
6.1 缓存
使用 cache-loader 可以加快构建速度，将编译时间缩短至少 50%，示例代码如下：
{
test: /\.js$/,
use: ['cache-loader', 'babel-loader'],
exclude: /node_modules/,
}6.2 使用 HappyPack
HappyPack 可以将 loader 中耗时的工作拆分成多个子进程并行处理。非常适用于大型项目，可以减少构建时间 80%，示例代码如下：
-- -------------------- ---- -------
----- --------- - --------------------
-------------- - -
-----
------- -
------ -
-
----- --------
------- -------------------------
-------- --------------
-
-
--
-------- -
--- -----------
--- -----
-------- -----------------
----------- ----------------
-------- ----
--
-
-6.3 使用 DllPlugin
DllPlugin 可以将第三方库打包成独立的文件，再在主应用程序中引用，可以减少构建时间，示例代码如下：
-- -------------------- ---- -------
-- --------------
-------------- - -
----- -------------
------ -
------- --------- ------------ ---------
--
------- -
--------- ----------------
----- ----------------------- -------
-------- ---------------
--
-------- -
--- ---------------------
--- -------------------
----- ----------------
----- -------------------- ---------------------------
--
-
-
-- -----------------
-------------- - -
-- ---
-------- -
--- ----------------------------
--------- -------------------------------------
--
-
-结论
优化 Webpack 可以提高页面加载速度，降低服务器负载，并提高用户体验。在本文中，我们介绍了一些优化实践，包括代码分离、Tree-shaking、优化 CSS、压缩 JavaScript、文件缓存和提高构建速度等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fce2534471362601743edc