通过代码拆分提高 JavaScript 包性能

ruhul7

以及如何通过动态加载昂贵的、非关键的 JavaScript 包来提高页面性能和加载时间。
使用基于 JavaScript 的框架构建的项目通常会附带大量的 JavaScript，这需要时间来下载、解析和执行，从而阻止页面呈现和用户输入。此问题在不可靠和缓慢的网络以及低端设备上更为明显。在本文中，我们将介绍代码拆分最佳实践并展示一些使用 React 的示例，因此我们加载呈现页面所需的最少 JavaScript 并动态加载大量非关键包。

React 等基于 JavaScript 的框架使开发 Web 应用程序的过程变得精简和高效，无论是好是坏。这种自动化常常导致开发人员将框架和构建工具视为黑盒。一个常见的误解是框架构建工具（例如 Webpack）生成的代码已完全优化，无法进一步改进。

尽管最终的 JavaScript 包是摇树优化和缩小的，但通常 台湾电话号码清单 整个Web 应用程序都包含在一个或几个 JavaScript 文件中，具体取决于项目配置和开箱即用的框架功能。如果文件本身被缩小和优化会有什么问题？

捆绑陷阱
让我们看一个简单的例子。我们网络应用程序的 JavaScript 包由以下六个页面组成，这些页面包含在各个组件中。通常，这些组件包含更多的子组件和其他导入，但为了清楚起见，我们将保持简单。


会加载和解析包含其他页面代码的整个包，这意味着页面上只会使用和呈现其中的一部分。这听起来效率低下，不是吗？除此之外，所有用户都在加载应用程序的受限部分，只有少数用户能够访问该部分——管理页面。即使代码在缩小过程中被部分混淆，我们也有暴露 API 端点或为管理员用户保留的其他数据的风险。

我们如何确保用户加载呈现他们当前所在页面所需的最低限度的 JavaScript？除此之外，我们还需要确保页面受限部分的包仅由授权用户加载。答案在于代码拆分。

在深入研究代码拆分的细节之前，让我们快速提醒自己是什么让 JavaScript 对整体性能产生如此大的影响。



跳转后更多！继续往下看↓认识“TypeScript 50 节课”，这是我们闪亮的 TypeScript 新指南。通过详细的代码演练、实践示例和常见陷阱——所有内容都分解为简短、易于管理的课程。对于了解足够多JavaScript 的开发人员来说是危险的。

跳转到目录↬

性能成本
JavaScript 对性能的影响包括下载、解析和执行成本。

与网站上引用和使用的任何文件一样，它首先需要从服务器下载。下载文件的速度取决于连接速度和文件本身的大小。用户可以使用缓慢且不可靠的网络浏览 Internet，因此 JavaScript 文件的缩小、优化和代码拆分可确保用户下载尽可能小的文件。