Webpack 是现代前端开发中最常用工具，它可以让我们打包、优化和管理我们的应用程序，但是在构建大型应用程序时，Webpack 打包优化可能会成为一个挑战。在这篇文章中，我们将深入探讨如何优化 Webpack 打包的性能，包括如何处理文件、代码拆分、tree shaking 等内容。
处理文件
Webpack 将所有的资源打包为一个或多个 bundle 文件，在实际生产环境中，这些资源很容易变为数百、甚至数千个文件，这将导致很大的性能消耗。下面是一些优化 Webpack 打包的技巧：
1. 使用 include 和 exclude
Webpack 会将所有的文件进行打包，无论是否需要，这将对性能产生很大的影响。使用 include 和 exclude 可以指定哪些文件需要进行打包，哪些文件不需要打包。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ --
----- --------
-------- ------
---- ---------------
--
-
-2. 使用 alias
当我们的应用程序变得庞大时，我们可能需要引用很多不同的文件。使用 alias 可以将这些文件映射成更短的名字，这将减少 Webpack 处理的时间。
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
------ -
---- -------------------- ----------
------- ----------------------
-
-
-3. 使用 cache-loader 和 hard-source-webpack-plugin
cache-loader 可以缓存 loader 的执行结果，这样在打包的过程中每次都只需要执行一次 loader。hard-source-webpack-plugin 可以缓存模块和 chunk 的代码，这就减少了从磁盘读取的 IO 操作。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ --
----- --------
-------- ---------------
---- ---------------- ----------------
--
--
-------- -
--- --------------------------
--
-代码拆分
代码拆分是 Webpack 中的一种功能，它将组件、库等一些包装成独立的文件来异步加载，这样可以减少打包后文件的大小。
1. 同步代码拆分
同步代码拆分是通过 webpack 配置实现的，我们可以在 webpack 的配置文件中指定入口文件和出口文件。
-- -------------------- ---- -------
-------------- - -
-- ---
------ -
----- -----------------
------- ------------------
--
------- -
--------- -------------------
----- ----------------------- --------
--
-2. 异步代码拆分
异步代码拆分是通过 import() 单独打包某些代码，这样可以减小初始加载的 JS 文件大小。
import( /* webpackChunkName: "my-chunk" */ './path/to/module')
3. webpack 代码分割插件
webpack-runtime-manifest 插件（推荐）：将运行时依赖分离到单独的 chunk 中，并将映射到 chunk 的位置存储到一个 JSON 文件中。
split-chunks-plugin 插件：可以将 node_modules 中的代码合并成一个文件。
tree shaking
tree shaking 是一个技术，它可以在没有使用的代码中自动删除多余的代码。这将减小代码的体积大小，提高性能。
1. babel-preset-env
babel-preset-env 可以将 ES6 代码转化为 ES5 代码，在这个过程中，它会删除多余的代码，提高代码的性能。
npm install babel-preset-env --save-dev
-- -------------------- ---- -------
-
---------- -
------- -
---------- ------
---------- -
----------- --- ---- ----- - ---------- ---- -- -- ---
-
--
-
-2. 使用 UglifyJSPlugin 插件
UglifyJSPlugin 可以删除未使用的代码。
npm install uglifyjs-webpack-plugin --save-dev
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// ...
optimization: {
minimizer: [new UglifyJSPlugin()],
},
}总结
Webpack 打包优化包括处理文件、代码拆分和 tree shaking 三个方面。在处理文件方面，可以使用 include 和 exclude，alias 及 cache-loader 和 hard-source-webpack-plugin；在代码拆分方面，可以使用同步代码拆分、异步代码拆分和 webpack 代码分割插件；在 tree shaking 方面，可以使用 babel-preset-env 和 UglifyJSPlugin 插件。这些优化技巧可以明显地提高应用程序的性能，提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a9f8d248841e989461d11a