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

　　

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

　　

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

　　

<强>合理拆分功能模块,按需加载
　　

　　

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

　　 　　 　　const路线:路线=( 　　{路径:“redirectTo:/home, pathMatch:“全部”}, 　　{路径:“回家”,loadChildren:“/home/home。模块# HomeModule '}, 　　{路径:“关于”,loadChildren:“。/关于/Ｄ？? AboutModule '}, 　　{ 　　路径:“arcgis”, 　　loadChildren:“。/arcgis arcgis.module # ArcgisModule ', 　　canLoad (EsriLoaderGuard): 　　} 　　); 　　 　　

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

　　

<强>预先压缩js文件
　　

　　

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

　　

针对这种情况,通常还需要对编译生成的js文件进行gzip压缩,因此在执行<代码> ng构建——刺激> 　　 　　 　　找到dist - name”*。js”-print0 | xargs 0 gzip - k 　　 　　

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

　　 　　 　　找到dist - name”*。css“-print0 | xargs 0 gzip - k 　　 　　

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

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

其中的<代码> main.6ee651175769ea64ed5f。js代码就有482 kb,而经过gzip压缩之后,文件大小显著减小:

　　 　　 　　1.8 k dist/ng-seed/4.1495 aba38157395f4a2d.js 　　1.0 k dist/ng-seed/4.1495 aba38157395f4a2d.js.gz 　　1.7 k dist/ng-seed/5. ec7eb27ea7c8eee53bcc.js 　　888 b ec7eb27ea7c8eee53bcc.js.gz dist/ng-seed/5. 　　482 k dist/ng-seed/main.6ee651175769ea64ed5f.js 　　124 k dist/ng-seed/main.6ee651175769ea64ed5f.js.gz 　　37 k dist/ng-seed/polyfills.5d61d41949cb87471fa8.js 　　12 k dist/ng-seed/polyfills.5d61d41949cb87471fa8.js.gz 　　2.2 k dist/ng-seed/runtime.c66e13242c809a55bd2f.js 　　1.2 k dist/ng-seed runtime.c66e13242c809a55bd2f.js.gz 　　 　　

<代码> main.6ee651175769ea64ed5f.js。广州> 　　

一般来说,对于角项目编译出的js文件,gzip压缩能减少3/4甚至4/5的体积,这样将会显著减轻网络传输的压力。

　　

<强>使用nginx作为服务器
　　

　　

为什么使用nginx作为前端服务器呢?原因如下:

　　

<>强支持传输预先压缩的js文件
　　

　　

将预先压缩好的. js。广州和原来的js文件一起上传到服务器,只要在nginx服务器的配置文件上加一句gzip_static> 　　位置/ng-app { 　　根/usr/share/nginx/html; 　　指数指数。html你; 　　gzip_static> 　　位置/api { 　　proxy_pass http://api-server: 8080/api; 　　proxy_read_timeout 600年代; 　　proxy_redirect; 　　proxy_set_header主机主机美元; 　　proxy_set_header X-Real-IP remote_addr美元; 　　proxy_set_header X-Forwarded-For proxy_add_x_forwarded_for美元; 　　proxy_set_header X-Forwarded-Proto美元计划; 　　} 　　之前 　　 　　

<强>官方的码头工人镜像
　　

　　

nginx有码头工人的官方镜,像部署,升级都是非常的方便。不得不说码头工人确实是好东西,用了就停不下来了。

　　

这几点都是在项目中积累的一些小技巧,如果想要了解细节,请查看这个ng-seed项目。
　　

　　

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