我是如何用 Webpack 虐待代码尺寸的 (第一回合)

在说压缩之前，先说一下这个项目。这是一个手机 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代码重写, 以及项目构建的改造。

这一章就先水过去了, 听说一篇文章不宜过长

下一章介绍重构后的项目