Webpack 是一个用于打包 JavaScript 应用程序的强大工具，但是如果应用程序规模较大，它会生成大量的代码，这会影响页面性能和加载速度。为了解决这个问题，我们需要优化 Webpack 打包体积。
1. Code Splitting
Code Splitting 是一个技术，能够将一个大的文件分割成多个小文件，这样使得应用程序加载速度更快，并能较快地展示可见内容。
Code Splitting 可以通过以下两种方式来实现：
- 手动分割代码
- 使用 Webpack 内置功能进行分割
手动分割代码需要将应用程序拆分成独立的模块，这样可以实现对 所有依赖项的本地检查。如果有些依赖项并不被使用，那么可以删除它们，然后再将应用程序拆分成多个独立的模块。
使用 Webpack 内置功能进行分割需要使用 Code Splitting 插件，例如 SplitChunksPlugin。
示例代码：
webpack.config.js:
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ----------------
------- -
--------- -------------------
----- ----------------------- -------
--
------------- -
------------ -
------- -----
-
-
--2. Tree Shaking
Tree Shaking 的目标是将不必要的代码从 Webpack 打包中删除。这是通过引入 ES6 模块化来实现的，它可以静态分析代码，并确定哪些代码可以安全删除。
示例代码：
webpack.config.js:
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ----------------
------- -
--------- -------------------
----- ----------------------- -------
--
------------- -
------------ ----
-
--在应用程序中，确保每个文件都只导出你真正想要的内容。例如，如果你有一个文件，其中导出了多个函数，但只调用了其中一个，则需要重新编写这个文件，只导出你要调用的函数。
3. 使用缓存
在打包完成后，Webpack 将生成一个或多个文件，其中有些文件可能很大。每次更改代码，Webpack 都会重新编译所有的文件。但是，如果没有更改依赖，则可以使用之前编译的文件，以节省时间和资源。
使用缓存可以在 Webpack 中实现，你只需要在配置中指定 cache 选项即可。你可以配置缓存的类型和位置等。
示例代码：
webpack.config.js:
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ----------------
------- -
--------- -------------------
----- ----------------------- -------
--
------ -
----- ------------
-
--结论
通过上述优化工作，我们可以大幅度减少我们的应用程序打包大小、提高应用程序的性能和页面加载速度。因此，Webpack 打包体积优化是非常值得做的一个工作。
不同的应用程序，需要不同的优化方法，我们需要针对应对应用程序，选择对应的优化策略。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677519696d66e0f9aaf3cedd