angular2-aot-webpack 生产环境下编译angular2
这里讲讲,angular2在生产模式下用webpack2进行打包的方法:
//使用rollup打包还是比较坑的,功能及插件上都不如webpack, 关键不支持代码分离,导致angular里的lazy loader将无法使用。
具体步骤:
angular=>aot=>webpack(Tree shaking&& Uglify)
angular=>aot:
首先你需要的依赖:
"@angular/compiler" "@angular/compiler-cli" "@angular/platform-browser"。
npm install 安装他们。
以下是目录结构:
...
./package.json
./tsconfig.aot.json
./tsconfig.json
./webpack.pro.config.js
./src/
|--./main.ts
|--./main.aot.ts
|--./app.module.ts
|--./router.module.ts
|--./app.component.ts
|--./child/
|--./child.module.ts
|--./child.component.ts
准备一个tsconfig.aot.json:
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"declaration": true,
"target": "es5",
"noImplicitAny": false,
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"typeRoots": [ "./node_modules/@types" ],
"lib": [
"dom",
"es2015"
]
},
"angularCompilerOptions": { //这是aot.json独有的,genDir:"." ,示意,生成的NgFactory文件放于原文件路径内。你也可以genDir:'aot',放在aot文件内,但我建议你放在原路径里。
"genDir": ".",
"skipMetadataEmit":true
},
"files":[
"src/app.module.ts", //从app.module.ts这个文件开始进行编译。
"src/child/child.module.ts" //这是lazy loader模块,因为是惰性加载模块,而没有在原模块中import或require它,所以需要单独编译。
],
"compileOnSave": false,
"exclude": [
"node_modules",
"src/polyfill.ts"
]
}
接下来运行npm run ngcStart; // package.json : "ngcStart": "ngc -p tsconfig-aot.json"
你会发现 src/文件内生成了许多*.ngfactory.ts , 这些就是提供给生产环境,最终使用的angular文件。自此预编译完成。
(.js文件可以删除它,'rimraf src/*.js src/*/*.js'。)
aot=>webpack:
我们需要从main.aot.ts来引导这些aot文件,这是main.aot.ts文件(别从main.ts引导):
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './app.module.ngfactory';
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
好了,下面是webpack的配置:
{ /....../
entry:{
'main':'./src/main.aot.ts'
},
output:{
path:'dest',
filename:'[name].bundle.js',
chunkFilename:'[id].chunk.js'
},
module:{
rules:[
{test: /\.ts$/,use:[
'awesome-typescript-loader', //我建议你用awesome-typescript-loader进行ts加载。
'angular2-template-loader',
'angular2-webpack2-lazy-children-loader' //这是针对lazy loader 的插件,后面会单独说
]},
{test:/\.json$/,use:'json-loader'}, {test:/\.html$/,use:'raw-loader'},
{test:/\.(jpg|png|gif)/,use:'file-loader?name=[path][name].[ext]'}
]
}
plugins:[
/..../
new webpack.optimize.UglifyJsPlugin({ /*mini化,并进行treeShaking. 虽然这个treeShaking存在一个问题。不过目前我并没有一个好办法,也没那多时间了. babili-webpak-plugin虽然shaking掉了class,但文件大小好像并没变化。 而rollup的treeShaking非常出色,最后得到的文件比webpack UglifyJsPlugin要小几十KB。可是这东西,不好用。:( */
compress:{warnings:true}
})
]
}
最后得到的main.bundle.js就是我们想要的主文件了。
0.chunk.js是child.module所对应的文件。
main.bundle.js 200~400KB 大小。比起不经过aot得到的mini文件(1MB多)小了很多。最后gz压缩,可以控制在100KB左右。最小可以50KB。
-----------------------------------
说说‘angular2-webpack2-lazy-children-loader’
2017.03.04-------
改用
'angular-router-loader?aot=true';
angular-router-loader v0.5 支持aot lazy load
-----------------------------
我们这样使用lazy loader:
loadChildren:' child.module#ChildModule'
可是aot编译后的文件名字成了child.module.ngfactory.ts,
里面的变量成了ChildModuleNgFactory。所以为了生产模式,你需要改写成:
loadChildren:' child.module.ngfactory#ChildModuleNgFactory'
如果你手动更改了,那么,你可以继续使用‘angular-router-loader’在webpack中进行加载。
但使用‘angular2-webpack2-lazy-children-loader’在于,它会自动判断,并在加载时replace这段string。所以你,在生产或者开发模式都可写成你原本的格式了。
------------------------------
可以下载尝试:https://github.com/zhantewei2/angular-aot-webpack
angular2-aot-webpack 生产环境下编译angular2的更多相关文章
- Android 环境下编译FFmpeg
Android 环境下编译FFmpeg 开发环境:Ubuntu 12.04.2 LTS , android-sdk-linux, android-ndk-r8e 一 .X264 编译 1. X2 ...
- centos7生产环境下openssh升级
由于生产环境ssh版本太低,导致使用安全软件扫描时提示系统处于异常不安全的状态,主要原因是ssh漏洞.推荐通过升级ssh版本修复漏洞 因为是生产环境,所以有很多问题需要注意.为了保险起见,在生产环境下 ...
- 生产环境下lnmp的权限说明
https://www.cnblogs.com/zrp2013/p/4183546.html 有关权限说明:-rwxrw-r‐-1 root root 1213 Feb 2 09:39 50.html ...
- Ubuntu1604环境下编译安装mariadb10.2.26
环境准备:阿里云ecs Ubuntu1604下,编译安装mariadb10-2.26 1.先安装一些初试环境所需要的工具软件包 apt install -y iproute2 ntpdate tcpd ...
- libCURL开源库在VS2010环境下编译安装,配置详解
libCURL开源库在VS2010环境下编译安装,配置详解 转自:http://my.oschina.net/u/1420791/blog/198247 http://blog.csdn.net/su ...
- Redhat环境下编译安装Google Bazel
Redhat环境下编译安装bazel 作者:Jack47 目前Google Bazel没有提供各个操作系统下的二进制安装包,只提供源代码,需要我们自己编译安装,详情可以见我翻译的中文版Google B ...
- Python开发程序:生产环境下实时统计网站访问日志信息
日志实时分析系统 生产环境下有需求:要每搁五分钟统计下这段时间内的网站访问量.UV.独立IP等信息,用直观的数据表格表现出来 环境描述: 网站为Nginx服务,系统每日凌晨会对日志进行分割,拷贝到其他 ...
- 生产环境下一定要开启mysqlbinlog
在没有备份数据库的情况下,可以用binlog进行恢复 在生产环境下安全第一,损失一点点效率换来的安全还是值得的. http://www.cnblogs.com/zc22/archive/2013/06 ...
- 在SoCEDS环境下编译和更新preloader和uboot程序的方法
在SoCEDS环境下编译和更新preloader和uboot程序的方法 前面有介绍preloader在HPS boot过程中的的作用,接下来讲述下用户在SoCEDS环境下改如何编译preloade ...
随机推荐
- PowerDesigner从Physical Data Model转Excel
参考资料:http://www.cnblogs.com/hggc/archive/2013/10/15/3369857.html 由于有把ER图转Excel的需求,幸运地找到一个可用脚本,稍做修改完成 ...
- 完全卸载oracle11g步骤【转】
重装oralce,每次都很蛋疼.找了个比较全的步骤.留作备份. 完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2 ...
- RHEL6.6 PXE安装-基于VMWare WorkStation
///////////第一部分:安装安装服务器 1.先安装一台RHEL6.6的服务器A(地址为192.168.139.132),作为安装服务器.这样后面的机器就可以指向这台服务器进行自动安装 2.在A ...
- CDH5.4.5运行多字符分割记录
准备工作: 测试文件内容:cis_cust_imp_info 20131131|+|100010001001|+|BR01|+|2000.0120131131|+|100010001002|+|BR0 ...
- 快速加载DXF、DWG格式文件控件ABViewer
ABViewer是一种高品质,低成本,高效率的多功能设计及工程文档管理应用程序. ABViewer为您提供专业的cad文件浏览和编辑工具. 支持多种格式,如:DWG格式, DXF, DWF, Hewl ...
- pushlet
自己准备做一个小游戏,租个云服务,然后挂在网上,可以跟同学一起玩,不过首先布置的是,这个游戏是否能实现,多人在线网页游戏,考虑到是否能够实时查询,在网上借鉴了下聊天原理,http长连接,搜索到push ...
- A problem about rcssserver3d
When I enter rcssserver3d to the terminal, the system told me this problem: (SimulationServer) SimCo ...
- AppCode 2016.2.3 发布,支持 Swift3 的特性
AppCode 2016.2.3 (build 162.2380.5)发布了,AppCode 是一个全新的 Objective-C.Swift 的集成开发环境,用于帮助开发 Mac.iPhone 和 ...
- Android系统文件夹组织结构
- VS.net中快捷键收缩和展开代码段 (转)
i. Ctrl-M-O 折叠所有方法 ii. Ctrl-M-P 展开所有方法并停止大纲显示(不可以再折叠了) iii. Ctrl-M-M 折叠或展开当前方法 iv. Ctrl-M-L展开所 ...