在现代 Web 应用中，前端代码的复杂度越来越高，代码量也越来越大，这为前端性能带来了挑战。其中一个关键问题就是加载时间过长。为了解决这个问题，我们可以通过打包代码分割来提升应用性能。
什么是打包代码分割？
打包代码分割就是将应用程序打包成多个小代码块，以便于浏览器在需要时动态加载，而不是在应用启动时一次性加载所有的代码。这样可以大大降低应用的初始加载时间，并提高应用的性能。
Angular 中如何进行打包代码分割？
在 Angular 中，我们可以使用 Angular CLI 来进行代码分割。Angular CLI 是 Angular 官方提供的命令行工具，可以帮助我们创建 Angular 应用、生成组件和服务等功能。下面是使用 Angular CLI 进行代码分割的步骤：
步骤一：安装 Angular CLI
首先，我们需要安装 Angular CLI。在终端中执行以下命令：
npm install -g @angular/cli
步骤二：创建新的 Angular 应用
使用 Angular CLI 创建新的 Angular 应用。在终端中执行以下命令：
ng new my-app
这将创建一个名为 my-app 的新的 Angular 应用。
步骤三：配置代码分割
打开 angular.json 文件，在 projects -> my-app -> architect -> build -> options 下添加以下配置：
-- -------------------- ---- -------
---------- -
------------- --------------
-------- -----------------
------- --------------
------------ -------------------
----------- --------------------
------ -----
--------------- -
-------------- -
--------- -----
-
--
---
-这里的配置项是关于 Angular 应用的构建选项，其中 optimization 是用来进行代码优化和分割的。
步骤四：进行构建
最后，在终端中执行以下命令进行构建：
ng build --prod
这将对应用进行构建并进行代码分割。
示例代码
"optimization": {
"splitChunks": {
"chunks": "all"
}
},总结
打包代码分割是提升前端应用性能的重要手段之一。在 Angular 中，我们可以使用 Angular CLI 进行代码分割。通过合理的配置和构建，我们可以将 Angular 应用的代码分成多个小块，使应用的初始化加载时间更短，从而提高应用的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ec65d968c7c53b0d18ed0