路由懒加载

为什么用路由懒加载?

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">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值