为什么要进行代码分割？
随着前端项目的规模越来越大，项目依赖的 JavaScript 文件也越来越多，这会带来以下问题：
- 性能问题：当一个页面引入的 JavaScript 文件过多时，会导致页面加载速度变慢，用户体验不好。
- 维护问题：当多个开发者同时工作在同一个较大的项目中时，互相协调的难度也随之增加。
为了避免以上问题，我们需要对前端代码进行拆分和优化，将每个功能单元拆分成不同的模块，减少每个模块的依赖关系，提高网页的加载速度。
Angular 如何进行代码分割？
Angular 已经内置了 webpack，可以通过 webpack 的特性进行代码分割。具体可以通过以下两种方式实现：
1. 使用 Dynamic Imports（动态引入）
使用 Dynamic Imports 可以避免在应用程序启动时加载不必要的代码。
以 Angular 官方文档中的例子为例，我们通过在 angular.json 文件中配置 "aot": false 来禁用 Ahead-of-Time 编译器（AOT）。然后可以通过使用 import() 语法来异步地引入模块：
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -----
--
------ ----- ------------- -
-- ----
----- ------------- -
----- - ------------- - - ----- ------------------------------------------
---------------------------
-
-2. 使用 Angular CLI 配置 Code Splitting
Angular CLI 已经为开发者做好了 webpack 配置文件，可以轻松实现代码分割。你只需要运行以下命令，启用 Lazy Loading：
-- -------- ------ --------- ------- -------- -------- ------------- ------ -----------
其中：
--route my-route指定了该模块的路由路径。--module app.module.ts指定了该模块应该添加到的模块。--flat指示 CLI 为模块创建单个文件，而不是在单独的文件夹中创建它。--moduleapp将该模块添加到 app.module.ts。
这将把所需的路由和模块导入到应用程序中，并自动处理惰性加载。
Angular 代码分割的意义
代码分割不仅可以提高页面加载速度，还可以带来以下好处：
- 高效利用系统资源：用户只会下载他们实际访问到的代码片段，而不是一次性下载整个应用程序。
- 提高应用程序的可维护性：我们可以更轻松地管理特定功能和组件的代码，简化并加快开发工作。
- 提高应用程序的可扩展性：通过将组件和功能拆分成单独的可扩展文件，我们可以轻松地添加新功能，而无需重新整合整个应用程序。
示例代码
我们可以通过以下示例代码来进行 Code Splitting。
1. 在 angular.json 中设置 aot 为 false：
-
----------- -
-------------------- -
------------ -
-------- -
---------- -
------ -----
-
-
-
-
-
-2. 使用 import() 动态加载模块：
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------- ---------------------------- ----------------
-
--
------ ----- ------------- -
----- ------------- -
----- - ------------- - - ----- ---------------------------
---------------------------
-
-3. 使用 Angular CLI 配置 Code Splitting：
-- -------- ------ --------- ------- -------- -------- ------------- ------ -----------
结论
通过 Code Splitting，我们可以提高应用程序的性能、可维护性和可扩展性。Angular 支持 Dynamic Imports 和 Angular CLI 等方式实现 Code Splitting，开发者可以灵活地选择适合自己的方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f6b182c5c563ced58b5b7c