大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
路由懒加载能够提高页面的加载速度,不过使用也得看场合。有时候需要懒加载,提升首页加载速度,一般是页面层级较为复杂的时候。大家看一下不加代码分割浏览器加载的文件。
这里蓝色部分是webpack自动分割出来的,当修改业务js时候manifest和vendor是不会改变的,浏览器直接在缓存中提取。
会变的是app.js。如果不采用路由分割会是什么效果呢。所有的代码都打包到app.js中,如果项目巨大,那么首页加载会是灾难。
那么vue的官方脚手架采用的是webpack打包的一套配置,那么要理解路由懒加载就要从webpack的代码分割的打包模式说起啦。
webpack代码分割
使用 require.ensure() 来拆分代码
require.ensure() 是一种使用 CommonJS 的形式来异步加载模块的策略。在代码中通过 require.ensure([<fileurl>]) 引用模块
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
既然讲了那就讲多一点吧,感觉要跑题了,但是我又收不住内心的激动。加啥,当然是Commonjs异步加载js文件啦。
js懒加载
require.ensure(['./a'],function(require){
let b = require('./b');
let a = require('./a');
console.log(a+b);
})
webpack代码分割
还记得webpack中的chunkFilename吗?不知道没关系。
path: config.build.assetsRoot,
filename: utils.assetsPath(‘js/[name].[chunkhash].js’),
chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js’)
},
require.ensure(['./c'],function(require){
let a = require('./a');
console.log(a);
},'d');
require.ensure(['./c'],function(require){
let b = require('./b');
console.log(b);
},'d');
简单介绍下以上代码,这儿‘d’就是最终打包成的chunkFilename 中的name。
讲讲vue路由懒加载
代码结构是这样的
const tvProgram = resolve => require(['@/page/tvProgram'], resolve);
const game = resolve => require(['@/page/gameIndex'], resolve);
const gameitem = resolve => require(['@/page/gameItem'], resolve);
熟不熟悉。这里采用的是AMD模式。
那这里没有指定chunkFileName啊,其实不用担心。
chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js’)
require-ensure和require-amd的区别:
- 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调函数
- 语法:
require(dependencies: String[], [callback: function(...)])
- 参数
- dependencies: 模块依赖数组
- callback: 回调函数
- 说明: require.ensure在需要的时候才下载依赖的模块,当参数指定的模块都下载下来了(下载下来的模块还没执行),便执行参数指定的回调函数。require.ensure会创建一个chunk,且可以指定该chunk的名称,如果这个chunk名已经存在了,则将本次依赖的模块合并到已经存在的chunk中,最后这个chunk在webpack构建的时候会单独生成一个文件。
- 语法:
require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
- dependencies: 依赖的模块数组
- callback: 回调函数,该函数调用时会传一个require参数
- chunkName: 模块名,用于构建时生成文件时命名使用
- 注意点:requi.ensure的模块只会被下载下来,不会被执行,只有在回调函数使用require(模块名)后,这个模块才会被执行。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184900.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...