vue 项目首次打开时加载速度很慢的优化方案

1、使用 vue-router 懒加载解决首次加载时资源过多导致的速度缓慢问题
当你的 SPA（单页应用程序）变得很复杂时，打包构建后的 js 包会变得非常大，以至于严重影响页面的加载时间。vue-router 支持 webpack 内置的异步模块加载系统。所以，那些使用较少的路由组件不必打包进 bundles 里，只要在路由被访问时按需加载。
懒加载路由写法：

routes: [    
{      
name: "register",      
path: '/register',      
component: resolve => require.ensure([], () => resolve(require('@/components/register')), 'register'),    
},//注册    
{      
name: "login",      
path: '/',      
component: resolve => require.ensure([], () => resolve(require('@/components/login')), 'login'),    
},//登录

2、使用CDN加速

以引入vue、vuex、vue-router为例：

第一步，在index.html中，添加CDN资源：

<!-- 引入Vue.js -->
<script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>
<!-- 引入vuex.js -->
<script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>

第二步，在 bulid/webpack.base.conf.js 文件中，改变 externals

externals: {    
'BMap': 'BMap',    
'vue': 'Vue',    
'element-ui': 'ELEMENT',  
},

第三步，将所有的引用去掉：

// import ElementUI from "element-ui";
// Vue.use(ElementUI);