在 Angular 开发中，我们通常使用 Angular CLI 构建应用程序并将其打包到一个单独的 JavaScript 文件中。这个单独的文件包含了所有的应用程序代码，包括第三方库和框架。这是一种非常方便的方式来发布应用程序，但是这种方式也存在一些问题。
问题
缓存
当用户访问您的网站时，浏览器会下载并缓存应用程序文件。当您更新应用程序时，浏览器将不会自动下载更新的应用程序文件。这意味着用户将继续使用旧版本的应用程序，直到他们清除浏览器缓存或者您强制他们重新加载新的应用程序。
加载时间
当您的应用程序被打包成一个单独的 JavaScript 文件时，它将会变得非常大。这意味着用户必须等待更长时间来下载和加载应用程序。这将导致用户体验的下降，并可能导致用户放弃使用您的应用程序。
性能
当您的应用程序被打包成一个单独的 JavaScript 文件时，它将包含所有的应用程序代码，包括第三方库和框架。这意味着用户必须下载并解析所有的代码，而不仅仅是他们需要的部分。这将导致应用程序的性能下降，并可能导致用户放弃使用您的应用程序。
解决方案
为了解决上述问题，我们可以使用一种不同的方式来发布我们的应用程序。这种方式被称为“按需加载”，它允许我们将应用程序分解成多个小块，并在需要时动态加载它们。
按需加载
按需加载允许我们将应用程序分解成多个小块，并在需要时动态加载它们。这意味着用户将只下载和加载他们需要的部分，而不是整个应用程序。这将大大减少加载时间和提高性能。
路由器
Angular 的路由器提供了一种非常方便的方式来实现按需加载。它允许我们将每个路由分解成一个单独的模块，并在需要时动态加载它们。这意味着用户将只下载和加载他们需要的部分，而不是整个应用程序。
示例代码
下面是一个示例代码，展示如何使用 Angular 的路由器来实现按需加载：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ------------- ---------------------------------- -- - ----- ---------- ------------- ---------------------------------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
在上面的代码中，我们将每个路由分解成一个单独的模块，并在需要时动态加载它们。这将大大减少加载时间和提高性能。
结论
在 Angular 开发中，我们应该避免使用 bundled 应用程序发布。相反，我们应该使用按需加载来分解应用程序，并在需要时动态加载它们。这将大大减少加载时间和提高性能，从而提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675bc978a4d13391d8f83f63