发布Angular应用至生产环境的方法
两年前，写过一篇使用rollup来为生产环境编译Angular2应用的文章，因为当时还没有angular-cli项目。而如今Angular已经到了7.x版本，对应的工具也是非常的完善，也就不在使用rollup来处理angular项目。
angular-cli用起来虽然方便，但是针对生产环境编译的话，还是有一些地方要注意的，接下来就介绍我在项目部署时的一些做法。
合理拆分功能模块，按需加载
一个系统往往功能非常多，因此就要根据项目的实际情况划分功能模块，一个功能模块对应一个NgModule，编译成一个独立的js文件，再结合angular的路由技术进行按需加载，就这一功能点来说，angular的支持已经非常的完善了。
constroutes: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压缩，因此在执行ngbuild--prod编译之后，再继续执行下面的shell命令：
finddist-name"*.js"-print0|xargs-0gzip-k
当然，如果发现编译生成css文件比较大的话，也可以通过下面的命令进行压缩：
finddist-name"*.css"-print0|xargs-0gzip-k
以一个仅仅使用了ng-bootstrap的模板项目为例，生成的js文件如下所示：
1.8Kdist/ng-seed/4.1495aba38157395f4a2d.js 1.7Kdist/ng-seed/5.ec7eb27ea7c8eee53bcc.js 482Kdist/ng-seed/main.6ee651175769ea64ed5f.js 37Kdist/ng-seed/polyfills.5d61d41949cb87471fa8.js 2.2Kdist/ng-seed/runtime.c66e13242c809a55bd2f.js
其中的main.6ee651175769ea64ed5f.js就有482KB，而经过gzip压缩之后，文件大小显著减小：
1.8Kdist/ng-seed/4.1495aba38157395f4a2d.js 1.0Kdist/ng-seed/4.1495aba38157395f4a2d.js.gz 1.7Kdist/ng-seed/5.ec7eb27ea7c8eee53bcc.js 888Bdist/ng-seed/5.ec7eb27ea7c8eee53bcc.js.gz 482Kdist/ng-seed/main.6ee651175769ea64ed5f.js 124Kdist/ng-seed/main.6ee651175769ea64ed5f.js.gz 37Kdist/ng-seed/polyfills.5d61d41949cb87471fa8.js 12Kdist/ng-seed/polyfills.5d61d41949cb87471fa8.js.gz 2.2Kdist/ng-seed/runtime.c66e13242c809a55bd2f.js 1.2Kdist/ng-seed/runtime.c66e13242c809a55bd2f.js.gz
main.6ee651175769ea64ed5f.js.gz有124KB，只有原来的1/4。
一般来说，对于angular项目编译出的js文件，gzip压缩能减少3/4甚至4/5的体积，这样将会显著减轻网络传输的压力。
使用nginx作为服务器
为什么使用nginx作为前端服务器呢？原因如下：
支持传输预先压缩的js文件
将预先压缩好的.js.gz和原来的.js文件一起上传到服务器，只要在nginx服务器的配置文件上加一句gzip_staticon;即可启用，这样在客户端请求.js文件时，nginx会先检查一下是否存在对应的.js.gz文件，如果存在的话，就直接返回.js.gz文件的内容，从而省去了在服务端进行压缩的过程，节省服务器的资源。
location/ng-app{
root/usr/share/nginx/html;
indexindex.htmlindex.htm;
gzip_staticon;
try_files$uri/ng-app/index.html;
}
作为后台接口的网关
nginx支持反向代理，可以作为后台接口的网关，这样可以省去一些跨域调用(cors)的问题，一般的反向代理配置如下：
location/api{
proxy_passhttp://api-server:8080/api;
proxy_read_timeout600s;
proxy_redirectoff;
proxy_set_headerHost$host;
proxy_set_headerX-Real-IP$remote_addr;
proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;
proxy_set_headerX-Forwarded-Proto$scheme;
}
官方的docker镜像
nginx有docker的官方镜像，部署、升级都是非常的方便。不得不说docker确实是好东西，用了就停不下来了。
这几点都是在项目中积累的一些小技巧，如果想要了解细节，请查看这个ng-seed项目。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。