为什么用路由懒加载?
webpack如果把所有的js文件都打成一个js文件,包会很大,严重影响页面首屏的加载速度
懒加载:
- 把不同的路由对应的组件分割为不同的代码块
- 当路由被访问时,才动态加载对应组件文件
怎么做
在脚手架的router.js或者router/index.js中的路由列表routes数组里面,需要加载的路由地址
- 不要过早的import,应该是路由首次被访问到,才import
{
path:"/about",//路由的跳转路径
name:"about",
component:()=>import(
/*webpackChunkName:"about"*/
'../views/About.vue'
)
}
//其中的/**/注释是webpack专用数值,其中的chunkwname:"名称"作为将来webpack打包时的分文件名,所以,这个注释中的名字尽量和当前路由或页面组件名保持一致
坑
仅适用上边异步是无法实现动态懒加载的,想要懒加载,必须让babel知道才行
解决:
手动安装一个babel的插件
npm i -save @babel/plugin-syntax-dynamic-import
然后再执行npm run build,编译完成的结果中应该可以看到以要懒加载的组件命名的独立js文件
浏览网站时,打来network’,只监控JS文件,刷新页面
如果不访问懒加载的页面,是不会加载独立的.js文件的,
只有访问到要懒加载的页面,才会动态的加载独立的.js文件
问题:
虽然实现了懒加载,但是,其实独立0js文件还会在后台自动下载
<link href="./js/about.js" rel="prefetch">
//其中prefetch的意思是,一旦网络空闲,就自动下载独立的js文件
//注:悄悄的浪费手机流量
解决
脚手架的根目录下,(不是脚手架的src下)
- 新建一个vue.config.js文件,注:是vue/cli 3.0版本的新的webpack配置文件
- 在vue.config.js中
module.exports={
chainWebpack:config=>{
config.plugins.delete("prefetch");
}
}
结果
页面的head中,再看不到
<link href="./js/about.js" rel="prefetch">