解决vue项目首页加载过慢的情况

1. 什么导致了首页初步加载过慢
   请看下面一张图就清楚了
   
   即app.js文件过大导致的。。。
2. 如何来处理
   vue-route 懒加载
   component： resolve => require([''],resolve)
   
3. 在webpack打包的过程中，将多余文件去掉，如map文件
   
   即在config/index.js中将productionSourceMap的值修改为false，就可以在编译时不生成.map文件了
   
4. cdn
   在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，但也会有一些不能按需引入，我们可以采用CDN外部加载，在index.html中从CDN引入组件，去掉其他页面的组件import，修改webpack.base.config.js，在externals中加入该组件，这是为了避免编译时找不到组件报错。
5. vue 异步加载
   vue异步加载分为组件的异步加载和请求时的异步加载两种情况。

• 组件异步加载即为路由的异步
  方法一：

export default new Router({
  routes: [ {
      path: '/login',
      component: resolve=>require(["@/components/pages/signIn/signIn"],resolve),
    }]
});

方法二：

export default new Router({
  routes: [ {
      path: '/login',
      component: ()=>import("@/components/pages/signIn/signIn"),
    }]
});

方法三：webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}

可能到时候打包的时候会出现路径找不到情况，这时候在webpack.prod.conf.js中修改下一些文件

写的可能不全，希望大家能多提提意见。。。