发布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.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 项目。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于使用Angular Cli如何创建Angular私有库的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
Angular.js回顾ng-app和ng-model使用技巧
这篇文章主要回顾Angular.js中ng-app和ng-model使用技巧，感兴趣的小伙伴们可以参考一下2016-04-04
本文主要介绍AngularJS ng-copy 指令,这里帮大家整理了ng-copy指令的基础资料,并附有示例代码和效果图,有需要的朋友参考下2016-08-08
这篇文章主要介绍了AngularJS 仿微信图片手势缩放的实例的相关资料,希望大家通过本文实现这样的功能，需要的朋友可以参考下2017-09-09
angular.js指令中的controller、compile与link函数的不同之处
最近一位大神问了我angular.js指令中的controller、compile与link函数的不同，想了想居然回答不出来，所以必须要深入的探究下，下面这篇文章主要介绍了关于angular.js指令中的controller、compile与link函数的不同之处，需要的朋友可以参考下。2017-05-05
这篇文章主要介绍了详解webpack+angular2开发环境搭建，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
这篇文章主要介绍了使用 Github Actions 自动部署 Angular 应用到 Github Pages,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
有时候在开发的过程中发现一个Angular项目不太够用,两个独立的项目又不太好复用,这时便需要将原来的Angular项目简单做个升级,这篇文章主要给大家介绍了关于将Angular单项目升级为多项目的相关资料,需要的朋友可以参考下2021-11-11
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
这篇文章主要给大家介绍了关于Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-03-03
Angular2仿照微信UI实现9张图片上传和预览的示例代码
本篇文章主要介绍了Angular2仿照微信UI实现9张图片上传和预览的示例代码，非常具有实用价值，需要的朋友可以参考下2017-10-10
最新评论