【Vue实用功能】Vue 项目首次打开加载很慢的优化方案

方案1： vue-router 懒加载

首次加载时资源过多导致速度缓慢问题
当SPA（单页应用程序）变得很复杂时，构建后的包会变得很大，从而导致页面的加载时间过长。vue-router 支持 webpack 内置的异步模块加载系统。所以采用路由被访问时按需加载，使用较少的路由组件就不用打包进 bundles 中。

routes: [    
{      
name: "proposalsSign",      
path: '/proposalsSign',      
component: resolve => require.ensure([], () => resolve(require('@/components/proposalsSign')), 'proposalsSign'),    
},  //页面1
{      
name: "proposalsTemplate",      
path: '/proposalsTemplate',      
component: resolve => require.ensure([], () => resolve(require('@/components/proposalsTemplate')), 'proposalsTemplate'),    
},//页面2

方案2：CDN加速

在index.html中，添加CDN资源

<!-- 引入Vue.js -->
<script src="https://cdn.staticfile.org/vue/2.4.3/vue.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);