Webpack 作为前端项目构建工具，打包速度一直是困扰开发者的一个问题。特别是在较大的项目中，Webpack 打包速度更是变得异常缓慢。在本篇文章中，我们将会提供一些最佳实践来优化 Webpack 的打包速度。
1. 优化 loader
在项目中加载的各种文件都需要通过 loader 进行转换，所以优化 loader 的性能是提升 Webpack 打包速度的一大关键。
1.1 精简匹配范围
loader 在转换文件时，可能会将一些不需要转换的文件也一同匹配范围内，并进行不必要的转换操作，从而浪费时间和能源。所以我们需要尽可能精简 loader 的匹配范围。
比如，你只需要将经过特殊处理的文件进行转换，那么可以在 rules 中指定 include 属性，来指定 loader 只处理需要编译的文件：
-- -------------------- ---- -------
-------------- - -
-----
------- -
------ -
-
----- ----------
-------- -
----------------------- ------------------
----------------------- ------------
--
------- ---------------
-------- -
-----
-
-
-
-
--1.2 尽可能避免文件不必要的编译
loader 在编译某些文件时，可能会经常使用一些固定的选项和参数进行编译。这种情况下，可以通过 cache 选项缓存编译过的文件结果，从而提高编译速度：
-- -------------------- ---- -------
-------------- - -
-----
------- -
------ -
-
----- ----------
---- -
-
------- ---------------
-------- -
--------------- ---- -- ----
-
-
-
-
-
-
--1.3 选择合适的 loader
选择最优的 loader 是提速 Webpack 的关键，简单而直接的原则是，对于你所需的 loader 功能，选择最小的、最快的 loader，并且合理地组合 loader。比如，使用 xml-loader 转换 JSON 文件，会浪费时间和风险。事实上，JSON 格式的文件可以直接当作一个 Javascript 模块进行加载。
2. 拆分 chunk
Webpack 通过把代码分割成小的块来处理大型项目，这就是所谓的代码拆分策略。代码拆分不仅简化了代码的结构，也可以提高我们的 hit-ratio，使得浏览器能更快地缓存和加载代码。
但是，每当我们拆分更多代码时，Webpack 也就要在底层维护更多的 module 和 chunk 。这通常意味着更多的内存和 CPU 负担。所以，我们需要在代码的拆分和打包之间取得一个平衡。
2.1 SplitChunksPlugin
使用 SplitChunksPlugin 对 bundle 进行缓存，并且可以大量减少重复的代码块。这个插件会看到那些可以共享的类库和公共代码块，在打包时进行拆分，可以提高打包速度。
-- -------------------- ---- -------
-------------- - -
-----
------------- -
------------ -
------- ------
-----
-
-
--2.2 动态导入
动态导入是一个异步模块的引入方式，这个模块的导入只会在需要使用的时候才会被锁加载。
import('./dependency')
.then(dependency => {
// Do something with "dependency".
})
.catch(error => {
// Handle error.
});这样，只有在我们真正需要这些模块时，它们才会被加载和编译。
3. 缩小搜索范围
Webpack 遍历项目中的所有依赖关系来构建打包过程，而这个过程可能会包含整个项目代码的搜索，这会导致很大的性能损失。
所以，我们建议缩小搜索范围，通过减少模块的搜索范围来降低 Webpack 打包时间。
3.1 减少模块的搜索范围
使用 resolve 属性来减少模块的搜索范围。
module.exports = {
//...
resolve: {
extensions: ['.js', '.jsx'],
modules: [path.resolve(__dirname, 'src')],
//...
},
};这会将搜索范围缩小到 src/ 目录下的文件。
3.2 使用 alias
使用 alias 告诉 Webpack 在打包时重定向被替换的路径，从而阻止 Webapck 在编译时搜索。
-- -------------------- ---- -------
-------------- - -
-----
-------- -
------ -
---- ----------------------- ------- -- ---- - --- --- ---
--
-----
--
--这样，Webpack 便会自动将所有的 @ 路径重定向为 src/ 目录的路径，从而减少搜索时间。
结论
Webpack 已经成为前端构建工具的事实标准，我们必须学会如何优化它，以保证我们的应用程序几乎秒速粉碎。在本文中，我们讨论了一些优化 Webpack 打包速度的最佳实践方法，包括优化 loader，拆分 chunk，缩小搜索范围。通过这些方法，我们希望能够帮助你提高你项目的可维护性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670c93505f551281025b190d