时间:2021-05-26
1. 普通加载
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如:
这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题,需要将他分成多个小文件,而且还要实现异步按需加载,即用到了再加载,而不用一股脑全部加载
2. webpack的require.ensure()实现按需加载
语法:require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
使用方法一:
使用方法二:
1、此时a.js作为依赖被加载,但是没有被执行(官方文档说的only loads the modules)
2、a.js和b.js会被打包成一个文件。
3、回调函数里只require了b.js,只有b.js的内容会被执行。
4、如果你需要使用a.js的内容,需要再加上require('./a.js')
给require.ensure的第一个参数传了['./list'],执行到这里的时候list.js会被浏览器下载下来,但是并不会执行list.js模块中的代码,也就是webpack官网说的,不会进行evaluate。真正进行evaluate的时候是到了后面这句var list = require('./list');这就是所谓的懒执行。
写在函数中的多个模块会被打包在一起,这一点和上面没有区别。另外,写在数组中的模块也会跟他们打包在一起,不管你有没有手动执行。
vue中使用
其实resolve的作用就是Promise里面那个resolve,在这里就是定义一个异步的组件
使用动态 import语法
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。这种方式下一个组件生成一个js文件用例:{path:'/promisedemo',na
按需加载的原理按需加载,本质上是把一个组件库的不同组件拆分成不同文件,按照需要引用对应的文件,而该文件暴露一个install方法,供Vue.use使用。比如:我
本文介绍了将Vue组件库更换为按需加载的方法步骤,分享给大家,具体如下:按需加载DEMO仓库地址背景我司前端团队拥有一套支撑公司业务系统的UI组件库,经过多次迭
vue路由配置以及按需加载模块配置1、首先在component文件目录下写俩组件:First.vue:我是第一个页面exportdefault{name:'fi
说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了学不完啊...没关系,看我的按需加载组件,或者异步组件,主