vue路由懒加载_vue路由原理怎么回答

vue路由懒加载_vue路由原理怎么回答路由懒加载能够提高页面的加载速度,不过使用也得看场合。有时候需要懒加载,提升首页加载速度,一般是页面层级较为复杂的时候。大家看一下不加代码分割浏览器加载的文件。 这里蓝色部分是webpack自动分割出来的,当修改业务js时候manifest和vendor是不会改变的,浏览器直接在缓存中提取。会变的是app.js。如果不采用路由分割会是什么效果呢。所有的代码都打包到app.js中,如果项目巨大,那

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

路由懒加载能够提高页面的加载速度,不过使用也得看场合。有时候需要懒加载,提升首页加载速度,一般是页面层级较为复杂的时候。大家看一下不加代码分割浏览器加载的文件。

vue路由懒加载_vue路由原理怎么回答

这里蓝色部分是webpack自动分割出来的,当修改业务js时候manifestvendor是不会改变的,浏览器直接在缓存中提取。

会变的是app.js。如果不采用路由分割会是什么效果呢。所有的代码都打包到app.js中,如果项目巨大,那么首页加载会是灾难。

那么vue的官方脚手架采用的是webpack打包的一套配置,那么要理解路由懒加载就要从webpack的代码分割的打包模式说起啦。微笑得意

webpack代码分割

webpack 可以帮助我们将代码分成不同的逻辑块,在需要的时候加载这些代码。
使用 require.ensure() 来拆分代码
require.ensure() 是一种使用 CommonJS 的形式来异步加载模块的策略。在代码中通过 require.ensure([<fileurl>]) 引用模块
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
第一个参数指定依赖的模块,
第二个参数是一个函数,
在这个函数里面你可以使用 require 来加载其他的模块,webpack 会收集 ensure 中的依赖,将其打包在一个单独的文件中,
在后续用到的时候使用 jsonp 异步地加载进去。

既然讲了那就讲多一点吧,感觉要跑题了,但是我又收不住内心的激动。加啥,当然是Commonjs异步加载js文件啦。

js懒加载

直接上代代码吧,看着直接。

require.ensure(['./a'],function(require){
    let b = require('./b');
    let a = require('./a');
    console.log(a+b);
})
以上代码,a 和 b 会被打包在一起,在代码中执行到这段代码的时候,会异步地去加载,加载完成后执行函数里面的逻辑。

那就是说a和b合并成一个文件,代码走到这里的时候才会去下载这个文件。当然这里是不是要加一个转圈呢啥的,毕竟是异步加载嘛。
这个稍微麻烦点,可以自己去百度之微笑。我这里只是抛个砖,自己找玉去吧。收。偷笑

webpack代码分割

还记得webpack中的chunkFilename吗?不知道没关系。偷笑

output: {

    path: config.build.assetsRoot,
    filename: utils.assetsPath(‘js/[name].[chunkhash].js’),
    chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js’)
  },

扣了一小段代码。这个是vue脚手架里面的。在build/webpack.prod.conf.js文件中,这个是走npm run build才会进来的。

那怎么配合chunkFilename做代码分割呢。

上代码:

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。


chunkFilename: utils.assetsPath(‘js/[name].[chunkhash].js’)

name最终a,b,c会被打包到一个叫d.hash.js的文件中去。大笑

大家也理解的差不多了把。前面稍微铺了一点,也抛了不少砖头。

讲讲vue路由懒加载

直接上代码啦。
代码结构是这样的

vue路由懒加载_vue路由原理怎么回答


红色方框中就是做路由懒加载的代码啦。是不是so easy

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’)


这里用的是id

这是最简单的写法啦。
首页是这样的。
vue路由懒加载_vue路由原理怎么回答
然后第二个界面是这样的。

vue路由懒加载_vue路由原理怎么回答

分割啦。。。。。。。。。
偷笑
那么问题来了什么是 require.ensure什么是require([],function)敲打敲打敲打

require-ensurerequire-amd的区别:                            

require-amd 

  • 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调函数
  • 语法: require(dependencies: String[], [callback: function(...)])
  • 参数 
    • dependencies: 模块依赖数组
    • callback: 回调函数

require-ensure 

  • 说明: 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账号...

(0)
blank

相关推荐

  • 深度学习基础知识整理「建议收藏」

    深度学习基础知识整理「建议收藏」本文是在七月的BAT机器学习面试1000题系列进行修改。 前言  July我又回来了。  之前本博客整理过数千道微软等公司的面试题,侧重数据结构、算法、海量数据处理,详见:微软面试100题系列,今17年,近期和团队整理BAT机器学习面试1000题系列,侧重机器学习、深度学习。我们将通过这个系列索引绝大部分机器学习和深度学习的笔试面试题、知识点,它将更是一个足够庞大的机器学习和深…

  • scrollIntoView 与 scrollIntoViewIfNeeded API 介绍

    scrollIntoView 与 scrollIntoViewIfNeeded API 介绍本文转自:scrollIntoView与scrollIntoViewIfNeededAPI介绍根据MDN的描述,Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域…

  • android 模拟器 haxm,Android模拟器不使用HAXM

    android 模拟器 haxm,Android模拟器不使用HAXM我遇到HAXM问题.在我使用Windows7之前,一切都很好,但升级到Win8.1Pro后,当我从AVD屏幕启动模拟器时,我看不到haxm启动消息.HAXM安装并正常工作,我安装了x86的图像,我的设备使用它但仍然无法在启动窗口中看到Emulator正在使用haxm的确认消息.这是情况;>我的处理器支持vt.>我检查了我的服务,所有Hyper-VT服务都“停止”>HAXM…

  • 无锁编程实例

    无锁编程实例最近在研究nginx的自旋锁的时候,又见到了GCCCAS原子操作,于是决定动手分析下CAS实现的无锁到底性能如何,网上关于CAS实现无锁的文章很多,但少有研究这种无锁的性能提升的文章,这里就以实验结果和我自己的理解逐步展开。1.什么是CAS原子操作在研究无锁之前,我们需要首先了解一下CAS原子操作——Compare&Set,或是Compare&Swap,现在

  • AnalyticDB实现和特点浅析「建议收藏」

    AnalyticDB实现和特点浅析「建议收藏」本篇主要是根据AnalyticDB的论文,来讨论AnalyticDB出现的背景,各个模块的设计,一些特性的解析。可能还会在一些点上还会穿插一些与当前业界开源实现的比对,希望能够有一个更加深入的探讨。O

  • pycharm为什么有中文就运行不了_pycharm为什么不能运行

    pycharm为什么有中文就运行不了_pycharm为什么不能运行1.下载并解压JBR(链接:link)我选的是左上角第一个2.替换pycharm安装文件里的jbr文件3.重启pycharm即可JBR链接地址:https://confluence.jetbrains.com/pages/viewpage.action?pageId=173178989

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号