VUE路由懒加载

webpack会把所有的js文件都打包成一个js文件,影响页面加载速度。

     (1)router/index.js中配置懒加载的路由地址: 

    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

  (2)脚手架默认采用babel翻译js代码,需要安装babel的一个插件:

    npm i -save @babel/plugin-syntax-dynamic-import  

    此时npm run build 编译完成的结果中可以看到以要懒加载的组件命名的独立js文件

    此时独立的.js文件还是会在后台自动加载,即使不会访问的页面也会下载下来。

  (3)配置webpack配置文件(vue/cli 3.0版本的新的webpack配置文件)

    在整个项目的根目录下新建vue.config.js文件,内容如下:

module.exports={
   chainWebpack:config=>{
    config.plugins.delete("prefetch")
  }
}
//prefetch意思是,一旦网络空闲,就自动下载独立.js文件

 此时页面的head中就看不到<link href="/js/about.js" rel="prefetch">了

      

  

  

posted @ 2020-03-15 10:29  俄罗斯方块  阅读(427)  评论(0编辑  收藏  举报