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">了