Webpack 打包后的代码体积过大怎么办？
在前端应用的开发过程中，Webpack 已经变成了一个非常受欢迎的打包工具。它可以将各种类型的前端资源打包成几个简单的文件。但是，Webpack 打包后的代码体积很容易变得非常大，带来很多性能问题。因此，在这篇文章中，我将会深入探讨一些解决这个问题的方法。
- 通过代码分离减少打包后的文件大小
在 Webpack 中，代码分离是一个可靠的方法来减少打包后的文件大小。它将代码划分到不同的块中，并通过这种方式来减少浏览器需要下载和解析的代码数量。通过使用动态导入语法，可以很容易地实现代码分离。下面是一个示例：
-- -------------------- ---- ------- ----- -------- -------------- - ----- - -------- - - - ----- ----------------- ----- ------- - ------------------------------ ----------------- - ------------------ ------- ------------- - --- ------ -------- - ----------------------------- -- - ------------------------------------- --
- 通过压缩代码减小文件大小
Webpack 有许多可以帮助你压缩 Javascript 代码的插件。通过使用 UglifyJSPlugin 插件可以将代码压缩至最小。在 Webpack 4 中，UglifyJSPlugin 已经被 Webpack 自带的 optimization.minimize 替代。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------ - ---------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- -------------------
----- ----------------------- --------
--
------------- -
--------- -----
---------- - --- -------------- --
--
--- 使用 tree shaking 技术去除无用代码
Tree shaking 是一个相对较新的技术，它可以从模块中移除未使用的代码。这是一项非常有用的技术，因为它可以去除打包后的代码中的不必要的内容，从而减小代码体积。Webpack 默认会开启这个功能，但只有被标记为 ES6 模块的代码才会被正确地 Tree shaking。
- 使用 splitChunksPlugin 进行优化
在某些情况下，我们可能需要打包多个入口文件。在这种情况下，可能会遇到重复的代码，这意味着这些代码在多个文件中都被打包了进去，导致打包后的文件体积变大。为了避免这种情况，可以通过在 Webpack 中使用 SplitChunksPlugin 来消除重复的依赖关系。
module.exports = {
mode: 'production',
optimization: {
splitChunks: {
chunks: 'all'
}
},
};- 懒加载资源
懒加载资源是一种非常有用的技术，它可以在需要加载的时候再去下载资源。这对于打包文件来说非常有用，因为它可以避免浏览器一次性下载所有的资源，从而减小了页面的加载时间。
button.addEventListener('click', () => {
import('./lazy-loaded').then(module => {
// 使用 module
});
});总结
通过上述方法，我们可以显著地减小 Webpack 打包后的文件体积，从而提高应用程序的性能和效率。通过代码分离、压缩代码、使用 tree shaking 技术、同时使用 splitChunksPlugin进行优化和懒加载资源，我们可以优化我们的脚本，更快地加载页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646571d8968c7c53b06212c0