记一次vue+element+echarts项目的优化（如何轻松将项目性能提高70%）

注意：本文有点标题党了，图不少很罗嗦，不想看图的同窗能够直接看加粗的内容和最后的总结

第一次在掘金写文章，哪里有不对的地方或者更好的方案请不要给我面子，立刻提出来

最近在作一个项目，技术栈为vue全家桶 + element-ui + echarts，打包后发现有1.44M，首屏体验不好。这能忍？果断开始优化。下面说说我是如何将一个打包后1.44MB的项目变成打包后只有0.42MB，性能提高70% 的。html

优化过程

准备：vue

vue-cli提供了一个很方便的查看代码打包后体积的命令，只需在正常的打包命令后加一个--report便可，这样打包完成后会自动开启一个页面，展现各个依赖包的大小。webpack
```
npm run build --report
复制代码
```
优化前：git

先看看优化前的大小吧github

这是打包前本地localhost中首屏加载的js文件，只有一个app.js （3.2MB）（注意是本地，未打包，未压缩）

这是打包后的截图，体积为1.44MB,打包时间为72s
第一次优化：路由懒加载web

说到优化，第一个确定考虑的是懒加载啦，立刻在vue和vue-router的官方文档里找到了解决方案vue-router

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载vue-cli

具体作法的话以下：npm

首先要安装一个插件Syntax Dynamic Import使项目支持动态import
```
cnpm install -S babel-plugin-syntax-dynamic-import
复制代码
```
而后修改.babelrc文件
```
// .babelrc 中的plugins数组中多加一个"syntax-dynamic-import"
{
  "plugins": ["syntax-dynamic-import"]
}
复制代码
```
最后修改router.js,将全部路由都改成动态加载
```
//router.js

//原来的写法：import Home from '@/components/PC/Home'
//改为下面这种形式（其余路由同理）
const Home = () => import('@/components/PC/Home')       
复制代码
```
ＯＫ，第一次优化完成。让咱们打包看看结果如何吧。

上面两张图分别是本地打包前首屏加载的js资源（经计算大约为3.1MB）的截图和打包后的截图（1.44MB），打包时间为 55s。注意我红色框出来的部分，和优化前相比较打包的结果多了几个以0 1 等数字开头的js文件，这其实就是咱们的路由文件被分离了出来，首屏只加载了须要的0.js和3.js文件，等到咱们切换到其余路由的时候才会加载其余的2.js或者4.js，而不是像之前那样所有包含在了app.js中一次性全加载出来。

和优化前相比，打包后大小没变，可是打包时间减小了，首屏加载的js资源也少了0.1MB（坑爹么不是！！）。

打包体积没变，首屏才少了0.1MB？效果这么差，你特么在逗我？

别着急打我，听我解释。打包体积没变是由于无论路由怎么懒加载，实质上须要的路由文件仍是那么多，大小是不变的，因此体积没变。而首屏才少了0.1MB，是由于这个项目原本就是个很小的项目，只有4个页面，并且这个项目的首页引入了echarts原本就相对来讲比较大。

因此说这一步路由懒加载的优化是彻底ok的，效果很差是由于是我项目的缘由，少了的那0.1MB是剩余未加载的路由文件大小。

若是你的项目有不少个页面，那么路由懒加载的效果应该会不差。

咱们再次看看这个图

发现左边黄色的框echarts和右边蓝色的框element-ui体积占了大头，咱们先看element-ui占了556KB，如今开始针对element-ui进行第二次优化
第二次优化：element-ui组件按需加载

针对element-ui的优化，没啥好说的，具体作法，直接看文档里面的按需引入吧。照着文档优化了之后，再次打包查看结果：

此次优化后，打包用了45s，总大小由1.44MB变成了1.16MB

并且element-ui模块所占的大小也由556kb变成了267kb，效果还行。可是这点提高怎么知足的了我？解决了element-ui，咱们看看另一个模块echarts:

比element-ui还要过度！！足足占了606kb，立刻针对最大的boss----echarts进行优化。

第三次优化：使用 CDN 外部加载资源

此次优化主要是针对echarts，在其文档里也有提到按需加载,可是此次咱们不用按需加载了，我想把echarts完全干掉！咱们此次要使用webpack的externals，参考这里

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。具备外部依赖(external dependency)的 bundle 能够在各类模块上下文(module context)中使用，例如 CommonJS, AMD, 全局变量和 ES2015 模块。

具体作法：

首先在index.html中引入echarts的外部CDN（若是须要地图组件，也须要一并引入）

//index.html
<script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
复制代码

而后在webpack.base.config.js中,作以下改动

//webpack.base.config.js   module.exports中增长externals对象
module.exports = {
    externals: {
        "echarts": "echarts"        //默认是配置引用的库（这里是echarts）暴露出的全局变量
    },
}
复制代码

查看优化结果:

这是打包前的本地首屏加载资源的截图，可算出此次一共加载了1.31MB（没有算上echarts.min.js，由于那是CDN资源）,相对于第一次优化后的3.1MB已经少了不少了。

打包后的截图以下

能够看到打包后的体积只有434.7KB,并且此次打包只花了34s，最重要的是echarts也真的被干掉了！！

惊不惊喜！！意不意外！！

各次优化的表格

懒得看图的同窗能够直接看下面这张表格

#	打包后体积	压缩后体积	首屏js资源	打包耗时
优化前	1.44M	425K	3.2M	72s
第一次优化（路由懒加载）	1.44M	434K	3.11M	55s
第二次优化（element-ui按需加载）	1.16M	381K	1.3M	45s
第三次优化（引入外部CDN）	434K	121K	1.3M	34s

能够看出，咱们的优化仍是颇有成效的，各类体积和打包耗时差很少减小了70% 左右。

总结

这部分必定要看啊啊啊

遇到webpack打包性能问题，先执行npm run build --report分析一波，而后根据分析结果来作相应的优化，谁占体积大就干谁
路由不少的复杂页面，路由懒加载是确定要作的
如今不少库都有提供按需加载的功能，有须要的话能够按照官方文档的作法来按需加载
webpack提供的externals能够配合外部资源CDN轻松大幅度减小打包体积，适用于echarts、jQuery、lodash这种暴露了一个全局变量的库
千万不要忘了开启Gzip压缩
本文讲的只是针对于webpack层面的优化，性能优化不仅这些，还有其余方面的优化，好比页面渲染优化（减小重排）、网络加载优化等。
本文的内容只适用于浏览器环境