在说压缩之前，先说一下这个项目。这是一个手机 WAP版的 IM 在线客服页面，如图
大概特点呢，首先是个单页，然后是基于 WebSocket 纯前端渲染，再然后呢，就是这上面要附加的功能很多，也就是意味着代码量会很大。
如何在功能不断累加下还能保持较小的代码体积，就成为了一样重要而持续的工作了。
初始版 -- 刚刚接手666K
代码尺寸(gzip 后):666K
webpack 版本: 2.7.0
webpack 配置代码就不贴上来了，因为封装过，而且都是很基础的 loader 和plugin，为了功能而加的，后面优化增加的部分再贴。
分析
第一次看到这个结果我也是一惊，其实这一版功能都比较基础，发发文字、表情、图片，都是一些简单的聊天必备的东西，居然有这么大的尺寸，肯定是有巨大浪费。
看一看根据webpack-bundle-analyzer生成的图, 顺便安利一下, 利用这个插件可以生成目标代码中所有依赖模块的尺寸, 并且通过图形直观展示出来, 图中文件的面积可以反映出文件的尺寸。
首先看到最大的两块区域
lodash 在是个很好用的工具, 但是完整的代码尺寸很大, 代码中只用到了部分工具方法, 却把整个包引入进去, 着实不划算
然后是index.vue
很难想象一个 vue 文件居然能有这么大, 出于好(ZHEN)奇(JING)观察了一下代码, 找出了一些神奇的代码
图片写成base64 放到了 css里
感受一下原图片的尺寸
26张图片, 每一张平均在20K 左右, 然后转成 base64
此时我的心中无数......奔腾而过~~~~
PS: 查看的过程中还无意中发现代码没有压缩...(会被吐槽死吧)
压缩666K -> 423K
增加压缩, 最简单的方式就是在 webpack 命令上加参数 -p。这个成果还是很大的
uglify 对于js 代码压缩的效果还是很强的
lodash 在这个版本没有进行优化, 是因为做了一次重构, 包括通讯 SDK代码重写, 以及项目构建的改造。
这一章就先水过去了, 听说一篇文章不宜过长
下一章介绍重构后的项目
