发布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 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
javascript实现简单的进度条
Jul 02 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
vue之将echart封装为组件
Jun 02 Javascript
vue-rx的初步使用教程
Sep 21 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分页示例代码
2007/03/19 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python语法快速入门指南
2015/10/12 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
公务员综合考察材料
2014/02/01 职场文书
大学老师推荐信
2014/02/25 职场文书
青年文明号服务承诺
2014/03/31 职场文书
幼儿教师个人总结
2015/02/05 职场文书
大学团日活动总结书
2015/05/11 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android