vue单页应用中打包优化，（首页加载优化）

1、vue.config.js配置，每个页面和组件都打包出单个文件，

参考https://www.cnblogs.com/Djdong/p/11841252.html里面的配置项

2、vue-router（懒加载路由）

{
    path: '/index',
    name: 'index',
    // route level code-splitting
    // this generates a separate chunk ([name].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "index" */ '@/views/Index.vue'),
}

3、公用组件懒加载

export default {
  name: 'home',
  components: {
    HelloWorld: () => import(/* webpackChunkName: "hello-world" */ '@/components/HelloWorld.vue'),
  },
}

打包出来的文件效果如下

 

这时候首页只会加载 

 

 hello-world.js被加载是因为首页有引用这个组件

4、v-show替换成v-if

 

 

 

 使用v-if后，组件只有在被使用的时候才会去加载，