一文大白话讲清楚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,是因为都是因为使用魔法注释

相关推荐
今晚吃什么呢?15 分钟前
前端面试题之CSS中的box属性
前端·css
我是大龄程序员17 分钟前
Babel工作理解
前端
CopyLower31 分钟前
提升 Web 性能:使用响应式图片优化体验
前端
南通DXZ32 分钟前
Win7下安装高版本node.js 16.3.0 以及webpack插件的构建
前端·webpack·node.js
你的人类朋友1 小时前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
Mintopia1 小时前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
前端太佬1 小时前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Mintopia1 小时前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
xRainco1 小时前
Redux从简单到进阶(Redux、React-redux、Redux-toolkit)
前端
印第安老斑鸠啊1 小时前
由一次CI流水线失败引发的对各类构建工具的思考
前端