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

先抛出重构项目的分析图

重构后423K -> 253k

这个变化还是很大的, 说一下发生的变化，首先index.vue 减小了。

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

然后是 imsdk

重构后 im-sdk

对比上一个版本

重构前 im-sdk

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

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

url-loader

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

接下来lodash (?)

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

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

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

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

引入babel-plugin-lodash 253K -> 230K

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

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