Webpack 是一个强大的前端打包工具，但是如果不合理配置，会拖慢页面的加载速度。本文将介绍一些优化实践，帮助您提高页面打开速度。
1. 代码分离
代码分离是优化 webpack 的重要手段之一，目的是将代码分离成多个小的块，实现按需加载，避免加载不必要的代码。
1.1 入口点配置
使用多个入口点或动态导入是实现代码分离的常用方式。其中多个入口点可以使用 entry 配置实现，示例代码如下：
-------------- - -
------ -
----- -----------------
------- -----------------
-
-上述代码将会生成两个入口点，一个是 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。
- ------- --------- -------------- ------------------------------------- -
2.2 模块构建
在编写模块代码时，遵循以下规则可以帮助 Tree-shaking 更好地工作：
- 不要将导出的值赋值给全局对象。
- 减少导出不必要的变量和函数。
2.3 检验 Tree-shaking 提示
如果您想检验 Tree-shaking 是否生效，在项目的 Webpack 配置文件（比如 webpack.config.js）文件中将 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 来压缩代码，可以直接使用。
-------------- - -
-----
------------- -
---------- ---- -----------------------
--
--5. 文件缓存
使用文件缓存可以避免重复打包已经打包过的文件。Webpack 4 默认为每个构建分配一个唯一的 hash，但是如果多次构建，这不够用，建议使用 contenthash 生成基于内容的 hash。
------- - --------- -------------------------- -
6. 提高构建速度
优化页面加载速度的同时，我们也需要关注构建速度。以下是几个提高构建速度的技巧。
6.1 缓存
使用 cache-loader 可以加快构建速度，将编译时间缩短至少 50%，示例代码如下：
- ----- -------- ---- ---------------- ---------------- -------- --------------- -
6.2 使用 HappyPack
HappyPack 可以将 loader 中耗时的工作拆分成多个子进程并行处理。非常适用于大型项目，可以减少构建时间 80%，示例代码如下：
----- --------- - --------------------
-------------- - -
-----
------- -
------ -
-
----- --------
------- -------------------------
-------- --------------
-
-
--
-------- -
--- -----------
--- -----
-------- -----------------
----------- ----------------
-------- ----
--
-
-6.3 使用 DllPlugin
DllPlugin 可以将第三方库打包成独立的文件，再在主应用程序中引用，可以减少构建时间，示例代码如下：
-- --------------
-------------- - -
----- -------------
------ -
------- --------- ------------ ---------
--
------- -
--------- ----------------
----- ----------------------- -------
-------- ---------------
--
-------- -
--- ---------------------
--- -------------------
----- ----------------
----- -------------------- ---------------------------
--
-
-
-- -----------------
-------------- - -
-- ---
-------- -
--- ----------------------------
--------- -------------------------------------
--
-
-结论
优化 Webpack 可以提高页面加载速度，降低服务器负载，并提高用户体验。在本文中，我们介绍了一些优化实践，包括代码分离、Tree-shaking、优化 CSS、压缩 JavaScript、文件缓存和提高构建速度等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fce2534471362601743edc