发布Angular应用至生产环境的方法

两年前， 写过一篇使用rollup 来 为生产环境编译 Angular 2 应用 的文章， 因为当时还没有 angular-cli 项目。 而如今 Angular 已经到了 7.x 版本， 对应的工具也是非常的完善， 也就不在使用 rollup 来处理 angular 项目。

angular-cli 用起来虽然方便， 但是针对生产环境编译的话， 还是有一些地方要注意的， 接下来就介绍我在项目部署时的一些做法。

合理拆分功能模块， 按需加载

一个系统往往功能非常多， 因此就要根据项目的实际情况划分功能模块，一个功能模块对应一个 NgModule ， 编译成一个独立的 js 文件， 再结合 angular 的路由技术进行按需加载，就这一功能点来说， angular 的支持已经非常的完善了。

const routes: Routes = [  { path: '', redirectTo: '/home', pathMatch: 'full' },  { path: 'home', loadChildren: './home/home.module#HomeModule' },  { path: 'about', loadChildren: './about/about.module#AboutModule' },  {    path: 'arcgis',    loadChildren: './arcgis/arcgis.module#ArcgisModule',    canLoad: [EsriLoaderGuard]  }];

这一点经常容易被忽视， 曾经就出现过犹豫没有合理划分模块， 导致编译出来的 js 文件高达 5 兆， 造成的客户体验非常差。 （甚至还出现开发机内存不足，无法成功编译的情况）

预先压缩 js 文件

当然， 仅仅考合理划分 js 模块的话， 还往往不太够， 因为单个模块也可能会比较大， 可能会超过 1 兆， 特别是使用了一些第三方控件（ng-bootstrap, ng-zorro 等）的情况下。

针对这种情况， 通常还需要对编译生成的 js 文件进行 gzip 压缩， 因此在执行 ng build --prod 编译之后， 再继续执行下面的 shell 命令：

find dist -name "*.js" -print0 | xargs -0 gzip -k

当然， 如果发现编译生成 css 文件比较大的话， 也可以通过下面的命令进行压缩：

find dist -name "*.css" -print0 | xargs -0 gzip -k

以一个仅仅使用了 ng-bootstrap 的模板项目为例， 生成的 js 文件如下所示：

1.8K dist/ng-seed/4.1495aba38157395f4a2d.js 1.7K dist/ng-seed/5.ec7eb27ea7c8eee53bcc.js 482K dist/ng-seed/main.6ee651175769ea64ed5f.js 37K dist/ng-seed/polyfills.5d61d41949cb87471fa8.js 2.2K dist/ng-seed/runtime.c66e13242c809a55bd2f.js

其中的 main.6ee651175769ea64ed5f.js 就有 482KB ， 而经过 gzip 压缩之后， 文件大小显著减小：

1.8K dist/ng-seed/4.1495aba38157395f4a2d.js1.0K dist/ng-seed/4.1495aba38157395f4a2d.js.gz1.7K dist/ng-seed/5.ec7eb27ea7c8eee53bcc.js888B dist/ng-seed/5.ec7eb27ea7c8eee53bcc.js.gz482K dist/ng-seed/main.6ee651175769ea64ed5f.js124K dist/ng-seed/main.6ee651175769ea64ed5f.js.gz 37K dist/ng-seed/polyfills.5d61d41949cb87471fa8.js 12K dist/ng-seed/polyfills.5d61d41949cb87471fa8.js.gz2.2K dist/ng-seed/runtime.c66e13242c809a55bd2f.js1.2K dist/ng-seed/runtime.c66e13242c809a55bd2f.js.gz