前言
随着现代web应用程序越来越复杂，越来越多的JavaScript框架也在不断涌现，以Angular为代表的现代化大型应用框架已经成为了制作这一类应用的首选。
无论是在Angular1.x还是在Angular2+的版本中，依赖项的管理以及应用打包是非常重要的一环。文件打包的方式有很多，并如webpack 的ES6 class加载器；可以提高单页应用程序的性能和可维护性。
而针对Angular2+，有如下几种方案：
- 简单的静态链接
- Webpack
- System JS
在这篇文章中，我们将深入讨论webpack的一种重要的第三方工具——angular-chunk-loader.
angular-chunk-loader
angular-chunk-loader是一个webpack loader，它允许你在Angular2+应用中动态加载Javascript、CSS和其他资源。 angular-chunk-loader 的作用是将高阶组件划分为更小的块，称为“ 懒惰加载”。当Angular2+应用程序运行时，任何未使用的模块都将被忽略，从而提高应用程序的加载速度和性能。
个人觉得要加强对JavaScript代码的懒惰加载特性的支持是非常有必要的，这样每个页面或子页面都可以分别加载不同的部分，从而实现更好的前端性能和用户体验。
安装
首先要确保你已经安装Webpack。如果没有，可以参考官方文档进行安装。
如果你已经安装了Webpack并且两个应用程序之间已经有应用程序的依赖关系，则可以安装angular-chunk-loader
npm install angular-chunk-loader --save-dev
现在，你已经可以使用这个工具去分割你的应用。
用法
使用示例：
webpack.config.js
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------------- - -------------------------------
----- ---- - ----------------
-------------- - -
------ -
---- ---------------
------- ------------------
--
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- -------------------
--------- ------------------
---
--- -------------------------------------
----- ------- ---------
--
--
------- -
-------- -
-
----- --------
-------- -
----------------------------
----------------------
-
--
-
----- ----------
------- ------
--
-
----- -------------------
------- -----------------------------------------------
--
-
----- ----------------------------------
------- ----------------------------------------------
--
-
----- ---------
------- -----------
-
-
-
--现在你的module中包含了这个angular-chunk-loader，它的文件名为awesome-typescript-loader 和这个加载程序的名称angular-chunk-loader.
注意：为了使用这个程序作为联合加载器，需要确保它在所有程序的顶部运行。在本例中，html是位于顶部的，紧随其后是Angular-chunk-loader。
{
test: /\.ts$/,
loaders: [
'awesome-typescript-loader',
'angular-chunk-loader'
]
},处理完成的API endpoint我们在 Angular中使用它作为提供者：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
-------------
----------- ------
--
------ ----- ---------- -
------------------- ----- ----------- --
---------- -
------ ----------------------------
-
-
现在，我们已准备好使用angular-chunk-loader的过程，加载程序将运行并根据需要进行加载(在上面的示例中每个组件和服务都是按照需要延迟加载)。
结束语
angular-chunk-loader在Angular2+项目中改善了依赖项管理的过程，尤其是在面对大型、多模块或多页面项目的时候。
通过对程序中懒惰加载实现的支持，我们不仅可以对庞大的程序进行更佳的管理，还可以提高加载速度、加快应用程序的展现时间，从而带来更出色的用户体验。
示例代码：angular-chunk-loader-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0781e8991b448d9a52