详解为生产环境编译Angular2应用的方法


Posted in Javascript onDecember 10, 2018

Angular 2 已经发布了 2.1.2 版本, 相信很多人已经在使用(试用)了, 相比 AngularJS 1.x , Angular 2 在性能上有了长足的进步, 同时 Angular 2 也变得非常的庞大, 动辄几兆的脚本, 如何部署到生产环境? 接下来就介绍如何为生产环境编译 Angular 2 应用, 在本文中, 我们将 Angular 2 官方文档中的 Hello Angular 应用编译到 50K 以下, 以用于生产环境。

未经优化的应用

根据 Angular2 官方的 QuickStart 快速创建一个 Hello Angular 应用, 在没有任何优化的情况下, 运行情况如下图所示:

详解为生产环境编译Angular2应用的方法

从上图可以看出, 仅仅一个 Hello 应用, 就产生了 40 个请求, 加载了 1.8M 的脚本, 这个在生产环境下(特别是移动端)是无法接受的。

要看这一步的完整源代码, 请移步 GitHub 。

打包与压缩

传统的方式无非就是进行打包和压缩, 我使用 browserify 和 uglifyjs 来进行打包与压缩, 首先是安装这两个工具类库:

npm i -D browserify uglifyjs

在 package.json 文件中添加这两个 npm 命令:

{
 "scripts": {
  "bundle": "browserify -s main app/main.js > dist/bundle.js",
  "minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js"
 }
}

现在运行这两个命令, 看看会怎么样:

npm run bundle && npm run minify

经过一大堆 WARN 之后, 没有出现 ERROR , 也没有出现 npm-debug.log 文件, 证明没有错误, 现在来分析一下大小:

ls -hl dist
-rw-r--r--  1 zhang staff  1.4M Nov 14 14:08 bundle.js
-rw-r--r--  1 zhang staff  528K Nov 14 14:10 bundle.min.js

bundle.js 有 1.4M , 不过 bundle.min.js 被压缩到了 528K , 看起来还不错, 还可以再优化一下, 那就是 gzip 压缩, 通常在服务器上都会启用:

gzip dist/bundle.min.js -c > dist/bundle.min.js.gz && ls -hl dist
-rw-r--r--  1 zhang staff  1.4M Nov 14 14:08 bundle.js
-rw-r--r--  1 zhang staff  528K Nov 14 14:10 bundle.min.js
-rw-r--r--  1 zhang staff  129K Nov 14 14:15 bundle.min.js.gz

经过 gzip 之后, bundle.min.js.gz 有 129K , 似乎应该可以了吧? 但是我觉得还有优化的空间。

要看这一步的完整源代码, 请移步 GitHub 。

AOT 以及 Tree Shaking

ES2016 (ES6) 有一个很重要的特性, 那就是 Tree Shaking , 可以移除项目中不需要的部分, 接下来我们使用 rollup 进行 Tree Shaking 。

为了能够使用 Tree Shaking , 我们需要将项目中的 TypeScript 编译成 ES2015 脚本, 需要修改 TypeScript 配置, 新建一个 tsconfig-es2015.json 的配置文件, 内容如下:

{
 "compilerOptions": {
  "target": "es2015",
  "module": "es2015",
  "moduleResolution": "node",
  "declaration": false,
  "removeComments": true,
  "noLib": false,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "lib": ["es6", "es2015", "dom"],
  "sourceMap": true,
  "pretty": true,
  "allowUnreachableCode": false,
  "allowUnusedLabels": false,
  "noImplicitAny": true,
  "noImplicitReturns": true,
  "noImplicitUseStrict": false,
  "noFallthroughCasesInSwitch": true,
  "typeRoots": [
   "./node_modules/@types",
   "./node_modules"
  ],
  "types": [
  ]
 },
 "files": [
  "app/main-aot.ts"
 ]
}

在 Angular2 应用中, 包含了一个即时编辑器 (JIT) , 在预编译好的应用中不是必需的, 使用 Angular2 的 AOT 编译可以移除即时编译器 (JIT) , 因此需要先安装 Angular 的编译器:

npm i -D @angular/compiler-cli

为了使用 aot 编译出来的文件, main.ts 文件也要做相应的修改, 将 main.ts 文件另存为 main-aot.ts , 修改内容如下:

import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
const platform = platformBrowser();
platform.bootstrapModuleFactory(AppModuleNgFactory);

不再使用 platform-browser-dynamic , 改为使用 platform-browser

同时 index.html 也另存为 index-aot.html , 也做相应的修改, 不在加载 system.js , 改为直接使用最终的 aot 脚本:

<!--
<script src="node_modules/systemjs/dist/system.src.js"></script>
-->
<!-- 2. Configure SystemJS -->
<!--
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
-->
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<script src="dist/bundle-aot.min.js"></script>
</body>

接下来的整体的思路是:

1、使用 ngc 进行 aot 编译;

npm run ngc -- -p tsconfig-es2015.json

这一步将会生成一系列 *.ngfactory.ts *.module.metadata.json 临时文件, 可以更新 .gitignore 来忽略这些文件, 避免对代码库造成污染;

2、将 typescript 文件编译成 es2015 (es6) 脚本;

npm run tsc -- -p tsconfig-es2015.json

3、使用 rollup 进行 tree shaking , 移除项目不使用的功能;

rollup -f iife -c rollup.config.js -o dist/bundle-aot-es2015.js

4、再次使用 typescript 将 tree shaking 之后的脚本编译成 es5 脚本;

tsc --target es5 --allowJs dist/bundle-aot-es2015.js -out dist/bundle-aot.js

5、使用 uglifyjs 再次压缩上一部生成的 es5 脚本;

uglifyjs dist/bundle-aot.js --screw-ie8 --compress --mangle --output dist/bundle-aot.min.js

这几个命令对应的 npm 脚本如下:

{
 "scripts": {
  "ngc": "ngc",
  "rollup": "rollup -f iife -c rollup.config.js -o dist/bundle-aot-es2015.js",
  "es5": "tsc --target es5 --allowJs dist/bundle-aot-es2015.js -out dist/bundle-aot.js",
  "minify-aot": "uglifyjs dist/bundle-aot.js --screw-ie8 --compress --mangle --output dist/bundle-aot.min.js",
  "prod-aot": "npm run ngc -- -p tsconfig-es2015.json && npm run tsc -- -p tsconfig-es2015.json && rollup && npm run es5 && npm run minify-aot"
 }
}

最终只要运行一个命令即可:

npm run prod-aot

最后来看一下最终的文件大小:

ls -hl
-rw-r--r-- 1 zhang staff  595K Nov 14 15:59 bundle-aot-es2015.js
-rw-r--r-- 1 zhang staff  669K Nov 14 16:01 bundle-aot.js
-rw-r--r-- 1 zhang staff  194K Nov 14 16:01 bundle-aot.min.js
-rw-r--r-- 1 zhang staff  46K Nov 14 16:02 bundle-aot.min.js.gz
-rw-r--r-- 1 zhang staff  1.4M Nov 14 15:54 bundle.js
-rw-r--r-- 1 zhang staff  528K Nov 14 15:54 bundle.min.js
-rw-r--r-- 1 zhang staff  129K Nov 14 16:02 bundle.min.js.gz

最终生成的 bundle-aot.min.js.gz 只有 46K , 比没有使用 aot 编译的最终文件 bundle.min.js.gz 少了将近 2/3 , 可以说 aot + tree shaking 效果非常的显著。

要看这一步的完整源代码, 请移步 GitHub 。

经过这样的终极编译优化编译之后, 应该可以放心的部署到生产环境了。

参考资料:

Angular Quick Start
AoT Compilation
Building an Angular 2 Application for Production

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

Javascript 相关文章推荐
js里的prototype使用示例
Nov 19 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 #Javascript
es6基础学习之解构赋值
Dec 10 #Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 #Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 #Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 #Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 #Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 #Javascript
You might like
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php简单统计中文个数的方法
2016/09/30 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
如何在PHP中读写文件
2020/09/07 PHP
js模拟点击事件实现代码
2012/11/06 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
react高阶组件添加和删除props
2019/04/26 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
Python os模块介绍
2014/11/30 Python
Python的randrange()方法使用教程
2015/05/15 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
python不同版本的_new_不同点总结
2020/12/09 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2014年人事科工作总结
2014/11/19 职场文书
接待员岗位职责范本
2015/04/15 职场文书
工作犯错保证书
2015/05/11 职场文书
婚育证明样本
2015/06/16 职场文书
庆七一活动简报
2015/07/20 职场文书