Ionic2 打包压缩(aot、uglify、TreeShaking)

自Angular2推出以来，Ionic则是紧随其后推出了Ionic2，Ionic不仅仅能够写出高质量高体验的APP，同时其提供的美观的UI框架在实际的网页也是应用广泛，然而，却存在一个要紧的问题，那就是它要依赖的包过多，而实际上，对于一个页面来讲，过多的依赖则意味着过大的文件体积和较差的用户体验，如何来解决这个矛盾？

当然解决的方式是多种多样的，基本都是通过uglify等方式去压缩的，可以通过webpack、gulp之类的工具去创建的自己的工程。不过就Angular2而言，却略有不同。

1. Angular2可以使用AOT去除不必要的冗余的代码，这不是单纯的Uglify能够解决的。
2. Webpack2带来了和Rollup类似的Tree-Shaking技术，能够极大的简化代码的体积，去除不必要的冗余代码。

在Ionic2中如何同时使用这两个技术来降低代码的体积呢？

搜索了很多的网页，找了一个大致的解决方式：

ionic build --prod

利用该命令去打包会发现www目录下的代码几乎都已经打包压缩过了。
看这个命令的打印状态如下：

Paste_Image.png

可以看到，ionic大概做了以下几个工作：

1. 清空原先的目录
2. 拷贝assets目录
3. 调用angular cli进行编译
4. 调用weboack进行编译
5. 压缩js
6. 编译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压缩。