当你使用 Angular2 开发单页应用程序（SPA）时，可能会遇到路由切换过慢的问题。这个问题的根本原因在于浏览器在加载和解析所有必要的 JavaScript 文件时需要花费大量的时间。在本文中，我们将介绍一些有效的技巧来优化路由切换速度。
1. Lazy Loading
Lazy Loading 技术可以让你按需加载模块和组件，大大减少了引用了整个应用的入口文件的情况。从而减少了加载时间，并提高了应用的速度。
你可以使用 Angular2 官方提供的 @NgModule 装饰器的 loadChildren 属性实现懒加载：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
-----------
-------- -
-----------------------
-
----- -------
------------- -------------------------------
-
--
--
-------- --------------
--
------ ----- ---------------- - -在上面的示例中，我们定义了一个路由，当用户访问 /lazy 路径时，会异步加载 LazyModule 中定义的组件和依赖。这个过程发生在用户初次打开 /lazy 路径时，而不是应用初始化时。这样，我们就可以避免在应用启动时加载不必要的文件，使应用更加高效。
2. Preloading
如果你希望同时保持模块和组件的懒加载，但又不希望用户在访问一个路由时遇到明显的延迟，你可以选择 Preloading 技术。
Preloading 在应用启动时立即下载所有关键模块和组件，这样在用户访问该路由时，就不需要再下载文件并遇到延迟。
你可以使用 Angular2 官方提供的 PreloadAllModules 服务来实现这一点：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------- ----------------- - ---- ------------------ ----- ------- ------ - - - ----- ------- ------------- ------------------------------- -- - ----- ------- ------------- ------------------------------- -- - ----- ----- ----------- ------ -- -- ----------- -------- ----------------------------- - ------------------- ----------------- ---- -------- --------------- -- ------ ----- ---------------- - -
在上面的示例中，我们传递了一个 preloadingStrategy 属性，用于设置预加载策略。在这里，我们使用了 PreloadAllModules 类，它将立即预加载所有懒加载预定义的模块和组件。
3. Ahead-of-Time (AOT) Compilation
Angular2 可以用 JIT 编译器来编译你的应用，在用户访问应用时进行编译。但 JIT 编译器在编译大型应用时会消耗大量的时间，这会导致延迟。与 JIT 相比，Ahead-of-Time（AOT）编译器可以在构建期间编译和打包所有必需的应用程序文件，减少应用程序首次加载时间。
你可以通过以下命令使用 Angular2 官方提供的 AOT 编译器来构建你的应用程序：
ng build --aot --prod
其中 --aot 标志启用 AOT 编译器，--prod 标志开启生产模式构建。这样，在打包应用程序后，你会发现应用程序加载速度显著提高。
4. Service Worker
Service Worker 是一个 JavaScript 脚本，可以在后台运行，并与浏览器进行通信。在 Angular2 中，Service Worker 可以在后台缓存所有必需的应用程序文件，从而避免了在每次访问应用程序时重新下载大量文件。
你可以使用 Angular2 官方提供的 @angular/service-worker 包来实现 Service Worker：
- 安装
@angular/service-worker：
npm install @angular/service-worker --save
- 在
app.module.ts中导入和注册ServiceWorkerModule：
-- -------------------- ---- -------
------ - ------------------- - ---- --------------------------
------ - ----------- - ---- ------------------------------
-----------
-------- -
--------------
----------------------------------------------- - -------- ---------------------- --
--
---
--
------ ----- --------- - -在上面的示例中，我们导入 ServiceWorkerModule，并在 imports 中注册该模块。我们也使用了 environment.production 来控制在生产环境中是否启用 Service Worker。
结论
在本文中，我们介绍了四种方法来优化 Angular2 应用程序的路由切换速度。
- Lazy Loading 可以按需加载模块和组件，减少不必要的文件加载时间，提高应用程序性能。
- Preloading 可以在应用程序启动时提前下载必需的文件，避免遇到延迟。
- Ahead-of-Time (AOT) 编译器可以在构建期间预编译所有必需的应用程序文件，减少应用程序首次加载时间。
- Service Worker 可以在后台缓存所有必需的应用程序文件，从而避免在每次访问应用程序时重新下载大量文件。
如果你使用了这些技术来优化 Angular2 应用程序的路由切换速度，并注意在各种场景下进行应用程序测试，你可以创建出一个快速、可扩展的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671f59252e7021665efd25d1