自
Angular2推出以来，Ionic则是紧随其后推出了Ionic2，Ionic不仅仅能够写出高质量高体验的APP，同时其提供的美观的UI框架在实际的网页也是应用广泛，然而，却存在一个要紧的问题，那就是它要依赖的包过多，而实际上，对于一个页面来讲，过多的依赖则意味着过大的文件体积和较差的用户体验，如何来解决这个矛盾？
当然解决的方式是多种多样的，基本都是通过uglify等方式去压缩的，可以通过webpack、gulp之类的工具去创建的自己的工程。不过就Angular2而言，却略有不同。
-
Angular2可以使用AOT去除不必要的冗余的代码，这不是单纯的Uglify能够解决的。 -
Webpack2带来了和Rollup类似的Tree-Shaking技术，能够极大的简化代码的体积，去除不必要的冗余代码。
在Ionic2中如何同时使用这两个技术来降低代码的体积呢？
搜索了很多的网页，找了一个大致的解决方式：
ionic build --prod
利用该命令去打包会发现www目录下的代码几乎都已经打包压缩过了。
看这个命令的打印状态如下：
Paste_Image.png
可以看到，ionic大概做了以下几个工作：
- 清空原先的目录
- 拷贝
assets目录 - 调用
angular cli进行编译 - 调用
weboack进行编译 - 压缩
js - 编译
sass
angular cli是Angular团队推出的命令行工具，使用该命令能够迅速的搭建出Angular2的项目模型，包括单元测试、配置文件、AOT等。
webpack自webpack2以来就能够支持类似rollup的tree-shaking技术了。
不过事实上，webpack2虽然支持tree-shaking，但是却是存在问题的，因为，一般来讲，我们都会把typescript转为es5，这个时候，其实tree-shaking是不起作用的(目前我用的时候不起作用)，主要是因为typescript在编译的时候采用了立即执行来return的机制。得改成es2015或者es6才能起作用。
查看tsconfig.json配置如下:
Paste_Image.png
可以看到，target的确是es5。
为了确认，在代码中添加如下代码：
class A {
constructor(){
console.log("asdkjnaskjnkjnkjnkjansdkasjndasjnd");
}
}
这个类没有在任何地方使用，也就是说，我并不想在我的代码里看到它，于是执行ionic build --prod后去www目录查看是不是还有这个类。
cat www/build/main.js | grep asdkjnaskjnkjnkjnkjansdkasjndasjnd
不出意外的，打印出结果了:
Paste_Image.png
可以看到，这里用的立即执行的方式去定义这个类的，所以，最后还是存在在代码中。
那么如果我把target改为es2015呢？
结果会报错。
Paste_Image.png
这个错误时由uglify导致的。
这是是uglify自身的bug导致的。可以参考该issue
实际上，uglify的master分支对es6的支持有一定的问题，但是，他们推出了一个harmony版本。
于是，我就尝试替换版本试试，按照推荐的做法，将node_modules/@ionic/app-scripts/package.json进行修改:
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony".
然后执行：
npm install
ionic build --prod
但是似乎并没有改变。。。
Paste_Image.png
总的来讲，暂时可能对 webpack的tree-shaking支持还不是很好，后续ionic及typescript应该会有所改进吧，但是AOT还是用到了的。
如果觉得体积还是大，可以在手动的进行一次gzip压缩。
网友评论