先抛出重构项目的分析图
重构后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 对于前端来说尺寸还是过大, 但是为了开发效率, 还是忍了
