作为前端开发人员，我们都知道 Webpack 是一个强大的构建工具，它可以将我们的前端代码打包成一个或多个 bundles，使用它能够优化代码并减少网络请求。但是，如果我们的 webpack 配置不合理或代码存在问题，那么我们将会遇到性能下降或错误问题。本文将为大家介绍如何分析 webpack 打包代码并进行优化，以减少代码量、加快网页加载速度和提升用户体验。
分析代码打包
我们可以通过 Webpack 的分析工具用网页查看你的 webpack 输出的各种信息。其中一个例子是 webpack-bundle-analyzer 插件，它允许我们分析我们的 webpack 打包代码并获得性能指标：
在上图中，我们可以看到一些重要的统计数据和可视化信息。例如，我们可以看到我们的 bundle 中的模块和它们在我们的代码中所占的比例。我们可以使用这些信息来优化我们的代码打包。
优化代码打包
下面是我整理的一些优化代码打包的建议：
1. Externals
在你的项目中，你可能会依赖一些 npm 包或者外部的库，可以使用 externals 类型将这些库从你的打包代码之外加载。这样能够减小打包后的体积。如果你需要一个常规库，可以使用 <script> 标签在你的 HTML 页面中引用。
-------------- - -
-- ---
---------- -
------- -
--------- ---------
---- ---------
----- ---
-
-
-- ---
--这样 webpack 就会在打包中忽略对于 lodash 的 import。
2. Code Splitting
如果您的代码库非常大，可以使用 code splitting 技术进行分离和优化。将多个 chunk 拆分成多个文件，每个文件只包含应用程序的一部分。
-------------- - -
------ -
------ -----------------
------- --------
--
------------- -
------------ -
------- -----
-
-
--这样能够将 vendor 单独打包成一个文件，不再与应用代码一起加载。此外还可以提供 Route-based code splitting 或者 Dynamic Imports。
3. Minification and Compression
使用 uglifyjs-webpack-plugin 插件来缩小代码代码大小。如果你是使用了 ES6 模块，在生产环境下使用该插件将自动激活压缩。如果需要额外的压缩，可以使用 gzip 插件。在 Web 服务端上启动 gzip 压缩将降低文件大小并加快用户体验。这同样适用于通过 HTTPS 服务提供的 CDN。
----- -------------- - -----------------------------------
----- ----------------- - --------------------------------------
-------------- - -
-- ---
------------- -
---------- ---- -----------------
--
-------- ---- --------------------
-- ---
--4. Lazy Loading
想象一下，当你第一次进入你的网站，你加载的页面可能只是一些必要的信息和解决方案。随着你向下滚动，你的网站将加载更多内容。这种方式可以避免在页面初始加载时，自动下载所有的 JavaScript 动作造成的负载和网络耗时。这种技术被称为延迟加载或慢加载。该技巧可以使用动态导入（dynamic import）来完成，参考 以下的示例：
-------- -------------- -
------ --------- ----------------- -------- -- ----------------- -------- - -- -- -
--- ------- - ------------------------------
----------------- - ---------------- ----------- - ---
------ --------
-------------- -- --- ----- -------- ----- ------- --- ------------
-
----------------------------- -- -
-------------------------------------
---一旦注册，webpack 关键字 import() 将在一个单独的 chunk 根据用户行为异步加载需要的资源。
5. Tree Shaking
Tree shaking 是一个术语，它描述了在编译时丢弃未使用的模块。这样能够减少打包后的体积，这样因为打包后的模块不会包含未使用代码的开销。Webpack 4 默认开启了这种优化技术。
-- -------- ------ - --- - ---- ---------- ------------------- -- -------- ------ ----- --- - -- -- ------ ------- ------ ----- --- - -- -- ---------
使用任何依赖于 ES2015 模块语法的工具，比如 Babel，都可以轻松地开始使用 Tree Shaking。使用链式调用，-p 标记或者 mode: 'production' 模式，它将默认开启 UglifyJSPlugin 和 Tree Shaking。
-------------- - - ----- ------------- ----- --
结论
Webpack 打包代码的优化是整个前端代码优化过程中的一个重要部分。本文介绍了构建工具 Webpack 的优化方案，其中包括了打包代码分析以及常见的优化操作。希望读者可以根据自己的实际需求来选择相应的打包优化操作，使其能够发挥更好的作用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672e0821eedcc8a97c86e8e6