详解为生产环境编译Angular2应用的方法
Angular 2 已经发布了 2.1.2 版本， 相信很多人已经在使用（试用）了， 相比 AngularJS 1.x ， Angular 2 在性能上有了长足的进步， 同时 Angular 2 也变得非常的庞大， 动辄几兆的脚本， 如何部署到生产环境？ 接下来就介绍如何为生产环境编译 Angular 2 应用， 在本文中， 我们将 Angular 2 官方文档中的 Hello Angular 应用编译到 50K 以下， 以用于生产环境。
未经优化的应用
根据 Angular2 官方的 QuickStart 快速创建一个 Hello Angular 应用， 在没有任何优化的情况下， 运行情况如下图所示：
从上图可以看出， 仅仅一个 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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
AngularJS实现动态编译添加到dom中的方法
本文实例讲述了AngularJS实现动态编译添加到dom中的方法.分享给大家供大家参考,具体如下: 在使用angularjs 时,希望通过动态构建angular模版,再通过angular进行展示. 使用 方法如下: <html ng-app="app"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> &l
-
利用angular自动编译andriod APK的绕坑经历分享
背景 前端架构师使用angular JS作为框架,打包android APK. 程序已经完成,需要使用自动编译功能来检测服务. 下面话不多说了,来一起看看详细的介绍吧 问题 问题一:JDK需要使用1.8,其他版本目前不支持. 问题二:android-sdk安装问题 npm run build:android build失败,提示: -- Please install the Android build tools version 19.1.0 or higher. -- 这个主要是因为andro
-
详解为生产环境编译Angular2应用的方法
Angular 2 已经发布了 2.1.2 版本, 相信很多人已经在使用(试用)了, 相比 AngularJS 1.x , Angular 2 在性能上有了长足的进步, 同时 Angular 2 也变得非常的庞大, 动辄几兆的脚本, 如何部署到生产环境? 接下来就介绍如何为生产环境编译 Angular 2 应用, 在本文中, 我们将 Angular 2 官方文档中的 Hello Angular 应用编译到 50K 以下, 以用于生产环境. 未经优化的应用 根据 Angular2 官方的 Quic
-
vue相关配置文件详解及多环境配置详细步骤
1.package.json 作用: package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息.比如项目名称,项目版本,项目执行入口文件,项目贡献者等等.npm install 命令会根据这个文件下载所有依赖模块. 文件结构如下: { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <zhangsa
-
详解在Anaconda环境下Python安装pydot与graphviz的方法
本文介绍在Anaconda环境中,安装Python语言pydot与graphviz两个模块的方法. 最近进行随机森林(RF)的树的可视化操作,需要用到pydot与graphviz模块:因此记录一下二者具体的安装方法. 相关环境的版本信息:Anaconda Navigator:1.10.0:Python 3.8.5. 话不多说,我们开始下载与安装操作.首先,打开Anaconda Prompt (Soft). 在弹出的窗口中输入: conda install -c anaconda pydot 随后
-
详解Pycharm第三方库的安装及使用方法
1.Pycharm第三方库的安装 方法一:pip install 包名:pip uninstall 包名. 方法二:pip install 下载路径\包名.whl (需要先下载第三包:地址:https://www.lfd.uci.edu/~gohlke/pythonlibs/,找到所需的包并下载保存),如下例安装gensim包所示: 方法三:若在pycharm编辑中,则在菜单setting/project/project interpreter中添加第三包.或者将第三方包放置于pycharm的s
-
详解Vue中的MVVM原理和实现方法
下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 一.思路整理 实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi
-
详解Maven多模块打包遇到的问题解决方法
项目描述: springboot+springcloud+zookeeper+eureka+maven:为多模块多module的分布式架构: 项目目录结构如下 父工程为server工程,其中有多个子module工程: 1.独立子工程:db.model.quartz.redis.util.basecontroller: 2.独立功能模块:dao.service.controller: 其中dao.service.controller分别依赖db.model.quartz.redis.util.ba
-
详解python中executemany和序列的使用方法
详解python中executemany和序列的使用方法 一 代码 import sqlite3 persons=[ ("Jim","Green"), ("Hu","jie") ] conn=sqlite3.connect(":memory:") conn.execute("CREATE TABLE person(firstname,lastname)") conn.executeman
-
详解JavaScript中的4种类型识别方法
具体内容如下: 1.typeof [输出]首字母小写的字符串形式 [功能] [a]可以识别标准类型(将Null识别为object) [b]不能识别具体的对象类型(Function除外) [实例] console.log(typeof "jerry");//"string" console.log(typeof 12);//"number" console.log(typeof true);//"boolean" console
-
详解数据库多表连接查询的实现方法
详解数据库多表连接查询的实现方法 通过连接运算符可以实现多个表查询.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 在关系数据库管理系统中,表建立时各数据之间的关系不必确定,常把一个实体的所有信息存放在一个表中.当检索数据时,通过连接操作查询出存放在多个表中的不同实体的信息.连接操作给用户带来很大的灵活性,他们可以在任何时候增加新的数据类型.为不同实体创建新的表,尔后通过连接进行查询. 连接可以在SELECT 语句的FROM子句或WHERE子句中建立,似是而非在F
-
详解微信小程序设置底部导航栏目方法
详解微信小程序设置底部导航栏目方法 小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备 阿里图标库 http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面 点击下