前言
Webpack 是前端开发中不可或缺的工具，它可以将多个 JavaScript、CSS 等文件打包成一个或多个文件输出，并且还支持代码分割、懒加载等高级功能。但是，Webpack 在对大型项目进行构建时非常耗时，给开发体验带来了不少困扰。本文将介绍 Webpack 构建的优化方法，包括代码分割、缩小构建目标、缓存提取，以提高项目构建的速度。
代码分割
使用代码分割可以将应用程序分成更小的包，以实现更快的加载速度。为了实现此目的，Webpack 提供了两种不同的代码分割方法：常规代码分割和动态导入。常规代码分割发生在构建时，而动态导入可以在应用程序运行时进行。在本文中，我们将重点关注常规代码分割。
常规代码分割需要在配置中指定一个 entry 属性，并将其值设置为对象。每个键值对代表一个 entry point，用于指定要分割的代码块。例如，以下是一个简单的 entry 配置：
module.exports = {
entry: {
main: './src/index.js',
vendor: './src/vendor.js'
}
}在上面的示例中，配置了两个 entry point，名为 main 和 vendor。main 是应用程序的主要入口点，而 vendor 是将要打包到单独的 vendor 文件中的库或框架。
在配置中，我们还需要使用 optimization.splitChunks 对象来定义 Webpack 如何将代码块拆分成文件。例如：
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
}构建的结果将是一个包含所有依赖的单个 JavaScript 文件和一个包含所有供应商依赖项的文件。
缩小构建目标
Webpack 能够编译和打包几乎所有支持的文件类型，使其具有最终生产的质量和最小的大小。但是，有时构建的目标并不需要完整的代码库。可以通过缩小构建目标来进一步优化 Webpack 构建。
通过使用 babel-preset-env 和在 Webpack 中添加对其的引用，可以为 JavaScript 代码生成根据目标环境自动缩小的组合。假设我们想要将项目构建为运行在现代浏览器上的应用程序，则可以在 Webpack 配置中添加以下内容：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -
-------- -
-
--------------------
-
-------- -
--------- ------ - ---------- ------- -- ---
-
-
-
-
-
-
-
-
-
-这将使用 @babel/preset-env，根据指定的目标浏览器集合自动缩小 JavaScript 代码。
缓存提取
当用于打包大型项目时，Webpack 构建会花费很长时间。缓存将在多次构建之间保持“记忆”状态，以便在下一次构建时尽可能重用先前打包的对象。
可以在 Webpack 配置中添加 cache 属性来配置缓存行为。在启用了缓存之后，Webpack 将不会重新转换相同的模块，从而使构建速度更快。例如：
module.exports = {
cache: {
type: 'filesystem',
buildDependencies: {
config: [__filename]
}
}
}在上面的示例中，Webpack 将使用 filesystem 缓存类型，并使用当前 Webpack 配置文件作为其唯一的构建依赖项。这将导致 Webpack 自动生成一个 Index 作为索引文件，将持久缓存文件存在硬盘上。
总结
在本文中，我们介绍了 Webpack 构建的优化方法，包括代码分割、缩小构建目标和缓存提取。通过这些优化，我们可以显著提高 Webpack 构建的速度，从而提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d0bb3db5eee0b5257b4b76