.懒加载路由、webpack分离文件、首屏过渡

提升网页性能几种办法

1 使用懒加载路由 把使用到的网页，用的时候再加载 方法 在路由的router index.js 中修改代码

const router = new VueRouter({
    routes: [
        {
            path: '/', //www.jd.com  =>  www.jd.com/  根路径
            //懒加载路由   异步路由
            component: () => import('@/views/Home')
        },
        {
            path: '/login',
            //  //懒加载路由   异步路由
            component: () => import('@/views/Login')
        }
    ]
})

2分离加载的主要js 比如分离 vue.js VueRouter.js 等 方法： vue.config.js 中添 //分离文件``

  configureWebpack: {
        //分离文件
        externals: {
            vue: 'Vue',
            'vue-router': 'VueRouter'
        }
    },

3 在加载的过程中在首页index.html中的 app div 之间添加加载中的动画 方法

  <div id="app">
    <style>
      #app {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50px;
      }
    </style>
    <h1>
      LOADING...
    </h1>
  </div>