记录一次vue商城项目首页加载速度优化的过程

新公司的一个玻璃商城项目，前任前端开发到一半跑路了，到这改了快一个月的bug，快完成的时候昨天把首页顺带优化了下。
1、一开始首页加载大概二十几秒的时间（performance.timing.loadEventEnd-performance.timing.navigationStart），看下network是不是接口阻塞了，发现了除了一个2.7s的接口响应很慢并没其他问题，让后台加了索引优化了下
2、检查router，发现没做路由按需加载
3、路由按需加载完毕，加载时间变成了十几秒，使用webpack-bundle-analyzer插件做检查，发现element-ui和highcharts占了vendor.js 里面很大的打包空间，考虑不把他们打包到webpack里，直接用cdn引入资源。

使用webpack-bundle-analyzer方法：

npm install webpack-bundle-analyzer

安装完成在build/webpack.prod.conf.js里加两行代码：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
plugins: [
  new BundleAnalyzerPlugin(),
 ...
]

运行npm run build 会自动弹出localhost:8888这个界面，在里面可以看到vendor里的打包情况

引入cdn：
index.html页面

image.png

build/webpack.base.conf.js:

image.png

这边注意有个坑：cdn调用的资源版本必须跟package.json安装版本的一致，同时把main.js里面像vue.use()这种东西去除

打包上线，1s加载完成。