vue-resumer 优化

vue-resumer 是我学习 vue 的一个练手项目: 项目地址 预览地址

问题：vendor 文件太大

1. 首先尝试了 vue 内置好的懒加载，然后发现 懒加载只是懒加载 .vue，实现按需分割，并不影响 vendor 的大小，只有当项目页面较多、使用 vue-router 的时候，采用懒加载，会自动帮忙分割文件，将一个 app.js 分割成多个。而 vendor 是 commonsChunk 将各个组件公用的第三方库打包到一起生成的文件。
2. 然后用 vue-cli 内置的 webpack-bundle-analyzer 插件分析了太大的原因，发现是 elementUI 的问题，通过查找，发现 elementUI 是支持按需加载的，按照文档，引入了一个 babel 插件，然后代码改成按需加载，其实不引入插件也是可以的，但是在 import 的时候比较麻烦，能懒就懒……
3. build 以后发现 vendor 从 698k 降到 329k
4. 后来又按照自己下边写的进一步提升的方法将 leancloud-storage 改为用 cdn 引入 vendor 降为 185kb

analyz 图

• element ui 按需加载前
• element ui 按需加载后
• leancloud-storage 改为引公共 CDN

效果图

• element ui 按需加载前
• element ui 按需加载后

• 在然后将 leancloud-storage 改为用 CDN 引入

• 第一次尝试 .vue 文件懒加载的效果，只是分割 app.js，当项目较大的时候可以使用这种方案优化

  进一步优化

• 如果要进一步优化我首先想到的是 Scope Hoisting 和 Tree Shaking，这两个功能听说很久了，但一直没用过，但我感觉提升不会太大。由于 Scope Hoisting 是 webpack 3.0 以后才添加的功能，而 vue-cli 的 webpack 还未升级到 3.0，因而并没有尝试。

• 另外想到的是把 leancloud-storage 这类不支持按需加载、Tree Shaking的第三方库改用 CDN，这样体积能小很多，并且知名 CDN 的加载速度比我演示用的 GitHub 速度快多了（这种方法已经应用）

  参考文章

• Webpack 打包优化之体积篇

• Vue-Cli + ElementUI 试水感受

• 浅谈 Vue 项目优化

• Webpack 打包优化之速度篇–木有用到，但值得学习

• Webpack 3 的新功能：Scope Hoisting–虽然没用到，但是了解下 scop hoisting 和 tree shaking