详解为生产环境编译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限制文本框只能输入中文的方法
Aug 11 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
es6中比较有用的7个技巧小结
Jul 12 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
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
php判断表是否存在的方法
2015/06/18 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
javascript实现数独解法
2015/03/14 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
js数组的基本使用总结
2021/01/18 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python写的一个文本编辑器
2014/01/23 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
python re模块和正则表达式
2021/03/24 Python
移动通信专业自荐信范文
2013/11/12 职场文书
交通事故检查书范文
2014/01/30 职场文书
管理失职检讨书
2014/02/12 职场文书
抽样调查项目计划书
2014/04/24 职场文书
小学生环保演讲稿
2014/04/25 职场文书
人力资源管理求职信
2014/08/07 职场文书
租车协议书范本2014
2014/11/17 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript