Webpack 是一个非常受欢迎的打包工具，用于将多个文件打包成一个文件，以提供更好的性能和更快的页面加载速度。但是，随着项目的规模变得越来越大，Webpack 的打包速度可能会变慢，并影响开发效率。在本文中，我们将探讨一些如何优化 Webpack 的打包速度的技巧。
1. 开启缓存
Webpack 可以使用缓存来减少打包时间，当 Webpack 打包时，它会将一些依赖项存储在缓存中，以便下一次打包时可以重复使用。在 Webpack 中，可以通过将 cache 指向一个路径，来启用缓存。在 webpack.config.js 文件中添加以下内容：
-- -------------------- ---- -------
-------------- - -
-- ---
------ -
----- -------------
-- -------------
--------------- ----------------------- -------------------------------
--
-- ---
--2. 减少文件数量
一个庞大的文件结构会给 Webpack 带来很大的负担。因此，我们可以尝试减少文件数量，其中最简单的一种方式是将静态资源放在 CDN 上。如果 CDN 集成得好，可以极大地减少请求时间，从而提高性能。
3. 使用多线程打包
Webpack 4 已经内置了多线程打包机制，使用 thread-loader 就可以将任务分配到多个 worker 中运行，从而提高打包速度。在 package.json 文件中添加以下内容：
{
// ...
"devDependencies": {
"thread-loader": "^2.1.3"
},
// ...
}然后，在 webpack.config.js 中，添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
---- -
-
------- ----------------
-------- -
-------- --------------------------- - --
------------ ---------
--
--
-
------- ---------------
-------- --- --- ---
-
--
--
--
--
-- ---
--4. 缩小搜索范围
Webpack 会搜索整个项目，以尝试找到需要打包的文件和模块。如果我们能够缩小这个搜索范围，就可以减少打包时间。在 Webpack 中，可以通过 resolve 和 alias 来缩小搜索范围。
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
-- ----------
----------- ------- ---------
-- ---------
-------- -
----------------------- -------
---------------
--
------ -
-- ----
---- ----------------------- -------
--
--
-- ---
--5. 只打包必要的代码
在 Webpack 中，可以通过 Tree Shaking 删除未使用的代码（只支持 ES6 模块）。我们可以使用一些工具来进行代码检查，确定哪些代码是必要的，哪些是多余的。例如使用 eslint-plugin-import 工具来检查未使用的依赖项。
{
// ...
"devDependencies": {
"eslint-plugin-import": "^2.22.0",
},
// ...
}module.exports = {
plugins: [
// 检查未使用依赖项
'eslint-plugin-import',
],
// ...
};在代码中，只需要使用 ES6 的导出语句即可：
export function foo() {
return 'foo';
}结论
通过使用上述技巧，可以在提高开发效率的同时优化 Webpack 的打包速度。在实际工作中，应根据项目规模和互联网环境等情况进行适量的调整。我们需要保证在提高速度的同时，能够保证构建出来的项目可以正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675beb2aa4d13391d8fbc6c9