实现 Angular Lazy loading 时应该避免 Static Imports 的原因

在 Angular 应用开发中，Lazy loading （懒加载）是一种常用的优化技术，通过 Code splitting（代码拆分）实现。然而，在实现过程中，开发者往往会遇到一些常见的问题。本文将详细介绍在实现 Angular Lazy loading 时应该避免的错误，并提供实际的示例进行说明。

避免 Lazy-Loaded 代码的静态导入

为了实现代码拆分，你的静态 JavaScript 代码（主应用程序包）不能对任何你想要懒加载的代码进行静态导入。否则，构建器会注意到该代码已被包含，因此，它不会为其生成一个单独的代码块。这一点在从库中导入符号的情况下尤为重要。

以 Angular 9 和 Angular 10 为例，对同一库入口点的静态导入和动态导入混合使用，即使是不同的符号，也会破坏该库入口点的懒加载和树摇（tree shaking）。如果你这么做，它会将整个入口点静态地包含在构建中。因此，强烈建议你为需要静态加载的代码创建特定的入口点，并为可以懒加载的代码创建单独的入口点。

让我们通过一个具体的示例来解析这个问题。假设你的主应用程序包中有如下的静态导入语句：

import { ComponentA } from 'library';

同时，你想要在另一个模块中懒加载 ComponentB：

import('library').then(m => m.ComponentB);

在这种情况下，构建器会注意到 library 已经被主应用程序包静态导入，所以它不会为 ComponentB 创建一个单独的代码块，而是将其包含在主应用程序包中。这就破坏了你的懒加载策略。

为了解决这个问题，你应该为需要静态加载的代码和可以懒加载的代码创建不同的入口点。比如，你可以创建两个库 libraryA 和 libraryB，其中 libraryA 包含 ComponentA，libraryB 包含 ComponentB。然后，你可以在主应用程序包中静态导入 ComponentA：

import { ComponentA } from 'libraryA';

并在另一个模块中懒加载 ComponentB：

import('libraryB').then(m => m.ComponentB);

这样，构建器就会为 ComponentB 创建一个单独的代码块，实现真正的懒加载。

以上就是在实现 Angular Lazy loading 时需要避免的一个重要错误。