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

↑接上文

先抛出重构项目的分析图

重构后 423K -> 253k

这个变化还是很大的, 说一下发生的变化

首先 index.vue 减小了

base64 从 css 中去掉, 直接使用外部文件, 因为本身这些文件只是一些表情, 显示的时候现加载影响也不大

然后是 im sdk

对比上一个版本

这一部分主要是去除无用代码, 以及简化代码写法, 基本上属于纯代码层面的操作

缩减到了原来的一半, 效果明显. 所以简洁的代码也是很好的减少代码尺寸途径

url-loader

将小于8K的文件资源当做 base64直接打包到代码中, 减少细小文件的加载消耗

接下来 lodash (?)

这就尴尬了, 本来原来只是引入完整包, 现在完整包和独立包都引入了一份, 更大了 (尴尬~~)

原因就是 im-sdk 中是按需引入 lodash 的, 而外面还是引入的完整包

当然了这里面还包括 webpack 2 升级到 webpack 4

当时直接上了新版, 没有做效果对比, 应该也是有一些影响的

babel-plugin-lodash 可以无需修改代码写法自动把 lodash 变成按需引入, 效果图

整体减少 20K+ , 果然 lodash 对于前端来说尺寸还是过大, 但是为了开发效率, 还是忍了

看到这里, 我又要说, 重构...

这次的原因嘛, 是为了优化合作模式, 具体的下章来解释吧

----

再次广告

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