使用Angular2开发Web服务的UI时，一个困扰的问题是由于js文件过大，导致初始加载时间较长。

使用angular-cli创建项目并进行开发，可以很容易地通过AoT支持将JS文件转化为gzip文件，然后导出为发布用文件。

我将尝试构建一个基本的项目，并在angular-cli中进行2个页面之间的转换，并几乎没有实现其他功能的情况下进行构建。

这次的执行环境

angular-cli: 1.0.0-beta.28.3
node: 6.10.3
os: macOS Sierra

首先，進行一個標準的建造。

当在项目文件夹的根目录下运行以下的angular-cli命令时，将会创建dist文件夹并导出构建好的用于发布的js等文件。

进行构建

在中文中进行本地化简述，只需要一个选项：

缩小发布尺寸

我会尝试使用-prod选项执行并压缩。

执行编译 -prod 命令

• vendor.bundle.jsでは3.3MB → 196KB

• polyfills.bundle.jsでは258KB → 28KB

main.bundle.jsでは11KB → 4KB

发布时的尺寸缩小（AoT）

这次我们将使用-prod选项和–aot选项来执行并压缩和AoT（Ahead of Time）化。

AoT就是事先分析Angular2在页面显示时所执行的各种动态处理，并将其硬编码到源代码中，以提高应用程序的启动速度。参考：使用Angular2 AoT编译技术加速TechFeed的故事

使用中文自然地重新表达一下：
以生产模式和 Ahead-of-Time 编译方式构建项目。

• vendor.bundle.jsでは196MB → 95KB

• polyfills.bundle.jsでは28KB → 28KB

main.bundle.jsでは4KB → 5KB(gzip)

总结

由于这个项目几乎没有应用程序的实现内容，所以我们只是做了一个可以来回切换的两页内容，实际上在进行了实际的Web应用程序的开发后会变成什么样子还需要试一试才能知道。

然而，通过使用angular-cli来创建项目并进行开发，我发现可以非常轻松地压缩和AoT编译发布文件，而无需繁琐的配置步骤。

接下来，我们将尝试使用angular-cli来延迟加载(lazy load) Angular2模块。