angular module lazy load

Angular 懒加载模块：优化应用加载速度

最新推荐文章于 2025-06-15 21:39:17 发布

原创最新推荐文章于 2025-06-15 21:39:17 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#npm #javascript

angular 专栏收录该内容

1 篇文章

订阅专栏

Angular 应用的下载体积可能较大，影响用户体验，特别是移动端。通过将应用拆分为懒加载模块，可以实现按需加载，只在组件实际需要时才下载对应的模块，从而显著减少初始加载时间。例如，路由配置中使用 `loadChildren` 来延迟加载 'customers' 模块，这样可以提高应用的性能和响应速度。

Lazy-Loading Modules

It turns out, you can do more with modules, than just organizing your components. It is also possible to lazy-load modules. So what does that mean?
Angular appears to be quite heavy in download size. Depending on your use case, that can be a big issue. Especially on mobile, it can take a while to download only the application. A way to reduce loading time, is to split your application into modules.
When you load your modules in a lazy way, it is not included in the initial application. Instead, it is only downloaded, when it is needed. Why should we download components we do not show anyway?

Error and problem

can not find module error!

action: Find the correct wording in the latest official website

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];