Vue单页面首屏加载优化

• Vue-Router路由懒加载
  require方式

{
    path: '/goods',
    name: 'goods',
    component: resolve => require(['@/components/page/goods/Goods.vue'], resolve),
    meta: {
        title: '商品管理'
    }
}

ES6 提出的import方法

{
    path: '/goods',
    name: 'goods',
    component: () => import('@/components/page/goods/Goods.vue')
    meta: {
        title: '商品管理'
    }
}

• 使用CDN资源,减小服务器带宽压力(将vue、vue-router、vuex、element-ui从vendor.js中分离出来，使用CDN资源引入)
  index.html文件引入cdn资源

<script src="[https://cdn.bootcss.com/vue/2.5.9/vue.min.js](https://link.zhihu.com/?target=https%3A//cdn.bootcss.com/vue/2.5.9/vue.min.js)"></script>  
<script src="[https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js](https://link.zhihu.com/?target=https%3A//cdn.bootcss.com/vuex/3.0.1/vuex.min.js)"></script>  
<script src="[https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js](https://link.zhihu.com/?target=https%3A//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js)"></script>  
<script src="[https://cdn.bootcss.com/element\-ui/2.0.7/index.js](https://link.zhihu.com/?target=https%3A//cdn.bootcss.com/element-ui/2.0.7/index.js)"></script>

• 注意！这里 element-ui 变量名要使用 ELEMENT，因为element-ui的 umd 模块名是 ELEMEN
  vue.config.js文件，配置webpack

module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'Axios':'axios'
    }
  }
}

• 按需加载三方资源，如iview,建议按需引入iview中的组件
• Vue动态加载异步组件

<script>
const AsyncComponent = () => import('./async-component')
或者
const AsyncComponent = resolve=>(\['./async-component'，resolve\])
export default {
  components: {
    AsyncComponent
  }
}
</script>

路由和组件的常用两种懒加载方式

1、vue异步组件实现路由懒加载
　　component：resolve => (['需要加载的路由的地址'，resolve])

2、es6提出的import(推荐使用这种方式)
　　const HelloWorld = () =>import('需要加载的模块地址')