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

沉寂了一段时间, 主要是工作侧重点有一些调整, 目前在搞一个在线客服的项目, 在业务需求迭代过程中也做了一些代码压缩的工作, 于是就有了这篇文章了

----

在说压缩之前, 先说一下这个项目

这是一个手机 WAP 版的 IM 在线客服页面, 上图

大概特点呢, 首先是个单页, 然后是基于 WebSocket 纯前端渲染, 再然后呢, 就是这上面要附加的功能很多, 也就是意味着代码量会很大

所以, 如何在功能不断累加下还能保持较小的代码体积, 就成为了一样重要而持续的工作了.

初始版 -- 刚刚接手 666K

代码尺寸(gzip 后): 666K

webpack 版本: 2.7.0

webpack 配置代码就不贴上来了, 因为封装过, 而且都是很基础的 loader 和 plugin, 为了功能而加的, 后面优化增加的部分再贴

分析

第一次看到这个结果我也是一惊, 其实这一版功能都比较基础, 发发文字, 表情, 图片, 都是一些简单的聊天必备的东西, 但是居然有这么大的尺寸, 肯定是有巨大浪费了

看一看根据 webpack-bundle-analyzer 生成的图, 顺便安利一下 webpack-bundle-analyzer , 利用这个插件可以生成目标代码中所有依赖模块的尺寸, 并且通过图形直观展示出来, 图中文件的面积可以反映出文件的尺寸.

首先看到最大的两块区域

lodash 在是个很好用的工具, 但是完整的代码尺寸很大, 代码中只用到了部分工具方法, 却把整个包引入进去, 着实不划算

然后是 index.vue

很难想象一个 vue 文件居然能有这么大, 出于好(ZHEN)奇(JING)观察了一下代码, 找出了一些神奇的代码

图片写成 base64 放到了 css 里

感受一下原图片的尺寸

26张图片, 每一张平均在20K 左右, 然后转成 base64

此时我的心中无数......奔腾而过~~~~

PS: 查看的过程中还无意中发现代码没有压缩... (会被吐槽死吧)

增加压缩, 最简单的方式就是在 webpack 命令上加参数 -p

这个成果还是很大的

uglify 对于js 代码压缩的效果还是很强的

lodash 在这个版本没有进行优化, 是因为做了一次重构, 包括通讯 SDK 代码重写, 以及项目构建的改造

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

下一章介绍重构后的项目, 很快哦

----

欢迎关注我的知乎账号, 关注后续优化操作, 想了解网页版 socket 和 IM 相关的内容也可以关注, 后面会有相关的文章