vue基础 - 17 （首屏优化：路由懒加载、删除预加载prefetch）

vue 的特点是 SPA 单页面应用。当打包时会把所有的页面代码都打包到 一个 app.js 的文件中

打包命令：npm run build

1、利用路由的懒加载写法，可以把页面的代码 拆分到不同的 JS 文件中， 不再都放在 app.js 里

   /* webpackChunkName: "about" */ ： network中，就会显示about.js，

   不写就默认是1.js、2.js....

{
    path: "/about",
    name: "About", 
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },

2、需要额外配置：关闭 预加载操作     

        根目录/vue.config.js中配置

module.exports = {
  // 对项目自带的 webpack 打包软件进行配置
  chainWebpack: (config) => {
    // 删除 prefetch 选项:  预加载
    config.plugins.delete("prefetch");
  },
};