一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload以及webpackChunkName的使用

文章目录

一文大白话讲清楚webpack基本使用------9------预加载之prefetch和preload

1. 建议按文章顺序从头看,一看到底,豁然开朗

2. preload和prefetch的区别

  • 通过翻译,prefetch是欲拉取;preload也是预加载,说白了都是预加载,那有什么区别呢
  • 区别就是相对于谁去预加载,也正因为有相对于谁,所以有有一个优先级的问题
  • 相对于谁呢,相对于他们所在的父chunk,
  • preload在父chunk加载时,并行开始加载;而prefetch是在父chunk加载完成后,在浏览器空闲时才加载
  • preload chunk会在父chunk中立即请求,立刻作用;而prefetch会在未来某个时刻作用
  • 所以,preload的优先级要比prefetch高。

2. prefetch的使用

  • prefetch怎么用呢,通过动态加载时进行魔法注释
  • 我们第八篇文章讲懒加载的时候,
  • 一文大白话讲清楚webpack基本使用------7------代码分离和懒加载
  • 在main.js里面通过 import('./modulejs/dynamic.js').then()动态加载dynamic.js,构建后,浏览器先不加载chunkJS,只有点击了btn之后才加载chunkJS
  • 现在我们让dynamic变成prefetch加载,就是在浏览器空闲的时候去加载他。实现的方式是在import时使用魔法注释
js 复制代码
import(
    /* webpackPrefetch:true */  //这里通过魔法注释,标明为prefetch
    './modulejs/dynamic.js'
    ).then(res=>{//通过import动态引入返回的是一个promise对象,then方法里面的res就是我们dynamic.js 里面export出来的对象
    res.addOnePToBody()
})
  • 然后我们重新构建
js 复制代码
npm run build
  • 我们运行index.html,打开调试器Elements,发现里面多了一个<link rel="prefetch" as="script" href='xxx.js">

  • 说明prefetch方式会议link的方式将js挂载到页面,然后在浏览器空闲的时候进行下载

3. preload的使用

  • preload的使用方式跟prefetch是一样的,通过魔法注释
  • 我们直接上代码
js 复制代码
import(
        /* webpackPreload:true */  //这里通过魔法注释,标明为preload
        './modulejs/dynamic.js'
        ).then(res=>{//通过import动态引入返回的是一个promise对象,then方法里面的res就是我们dynamic.js 里面export出来的对象
        res.addOnePToBody()
    })
  • 更好的验证效果,我们dynamic.js里面新加一个函数
js 复制代码
function sayHello(){
    console.log('I`m sayHello from dynamic.js loade by preloade')
}
  • 然后再main.js里面动态引用引用
js 复制代码
import(
   
    './modulejs/dynamic.js'
    ).then(res=>{//通过import动态引入返回的是一个promise对象,then方法里面的res就是我们dynamic.js 里面export出来的对象
    res.sayHello()
})
  • 然后我们重新构建
js 复制代码
npm run build
  • 在浏览器里面运行index.html,发现dynamic.js的chunkJS直接被加载了

** 在实际开发中,我们优先使用prefetch,等待浏览器空闲时再预加载**

4. webpackChunkName

  • 这个就是给动态导入的chunk取一个别名

  • 如果我们output配置filename中包含[name],那么我们就可以通过异步导入的时候制定别名

  • 同样使用魔法注释来实现

  • 我们现在修改output的filename,加入[name]

  • 然后动态导入dynamic.js的chunkJS时去个别名,叫rename-dynamic

js 复制代码
import(
    /* webpackChunkName:"rename-dynamic" */
    './modulejs/dynamic.js'
    ).then(res=>{//通过import动态引入返回的是一个promise对象,then方法里面的res就是我们dynamic.js 里面export出来的对象
    res.sayHello()
})
  • 然后我们重新构建
js 复制代码
npm run build
  • 发现构建的chunkJS已经加上了rename-dynamic前缀

  • 就是这个道理,在prefetch和preload里面将这个webpackChunkName,是因为都是因为使用魔法注释

相关推荐
专注VB编程开发20年14 分钟前
jss html5-node.nodeType 属性用于表示节点的类型
前端·js
烛阴1 小时前
Promise无法中断?教你三招优雅实现异步任务取消
前端·javascript
GUIQU.1 小时前
【Vue】单元测试(Jest/Vue Test Utils)
前端·vue.js
暮乘白帝过重山1 小时前
Ollama 在本地分析文件夹中的文件
前端·chrome·ollama
一只小风华~2 小时前
Web前端开发:CSS Float(浮动)与 Positioning(定位)
前端·css·html·html5·web
前端张三2 小时前
vue3中ref在js中为什么需要.value才能获取/修改值?
前端·javascript·vue.js
moyu842 小时前
前端从后端获取数据的流程与指南
前端
还不如ctrC+V2 小时前
VScode在 Markdown 编辑器中预览
node.js·json
涛哥码咖2 小时前
Rule.resourceQuery(通过路径参数指定loader匹配规则)
前端·webpack
夕水2 小时前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae