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


Posted in Javascript onDecember 10, 2018

两年前, 写过一篇使用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.js
1.0K dist/ng-seed/4.1495aba38157395f4a2d.js.gz
1.7K dist/ng-seed/5.ec7eb27ea7c8eee53bcc.js
888B dist/ng-seed/5.ec7eb27ea7c8eee53bcc.js.gz
482K dist/ng-seed/main.6ee651175769ea64ed5f.js
124K dist/ng-seed/main.6ee651175769ea64ed5f.js.gz
 37K dist/ng-seed/polyfills.5d61d41949cb87471fa8.js
 12K dist/ng-seed/polyfills.5d61d41949cb87471fa8.js.gz
2.2K dist/ng-seed/runtime.c66e13242c809a55bd2f.js
1.2K dist/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_static on; 即可启用,这样在客户端请求 .js 文件时, nginx 会先检查一下是否存在对应的 .js.gz 文件, 如果存在的话, 就直接返回 .js.gz 文件的内容, 从而省去了在服务端进行压缩的过程, 节省服务器的资源。

location /ng-app {
  root  /usr/share/nginx/html;
  index index.html index.htm;
  gzip_static on;
  try_files $uri /ng-app/index.html;
}

作为后台接口的网关

nginx 支持反向代理, 可以作为后台接口的网关, 这样可以省去一些跨域调用 (cors) 的问题, 一般的反向代理配置如下:

location /api {
  proxy_pass http://api-server:8080/api;
  proxy_read_timeout 600s;
  proxy_redirect off;
  proxy_set_header Host $host;
  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 $scheme;
}

官方的 docker 镜像

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
webpack优化的深入理解
Dec 10 #Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 #Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 #Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 #Javascript
es6基础学习之解构赋值
Dec 10 #Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 #Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 #Javascript
You might like
一个PHP日历程序
2006/12/06 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP可变函数的使用详解
2013/06/14 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
vue实现文字加密功能
2019/09/27 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
简单实现python爬虫功能
2015/12/31 Python
Python中if有多个条件处理方法
2020/02/26 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
什么是数据抽象
2016/11/26 面试题
数字化校园建设方案
2014/05/03 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
联谊活动总结范文
2015/05/09 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书