vue 加载太慢_vue单页应用首次加载太慢之性能优化

问题描述：

最近开发了一个单页应用，上线后发现页面初始加载要20s才能完成，这就很影响用户体验了，于是分析原因，发现页面加载时有个

vendor.js达到了3000多kb，于是在网上查找了一下原因，是因为我打包的时候把所有第三方依赖都打包放进去了；要怎么分离出去呢，

看下面步骤：

一、解决打包后vendor.js 很大，导致上线后页面首次加载速度异常慢：

vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓慢的问题。

解决方案：使用externals引用第三方资源，防止element资源被打包到自己项目中，(总共修改3个部分index.html、webpack.base.conf.js、main.js)

1、修改index.html页面，在head中引入cdn上的资源。

注意：上面是直接重cdn上引入的，如果某个时候cdn服务器出现问题，我们的项目就瘫痪了，所以为了安全起见要给自己留一手喔，

采用下面的方法，当上面的文件引入失败后，就从备用的地址引入；当然备用的地址你也可以换成本地的，我这里是放的另一个cdn服务器上的，

应该不会两个服务器同时出现故障吧！...

//

if(typeofVue== 'undefined') {

document.write(unescape("%3Cscript src='h