webpack 中 webpackPreload 和 webpackPrefetch

本文最后更新于：2022年4月22日上午

webpack 中 webpackPreload 和 webpackPrefetch 可以让我们对一些模块进行预加载及预获取

`webpackChunkName`

在介绍 webpackPreload 和 webpackPrefetch 之前，我们先介绍一下 webpackChunkName

webpackChunkName 可以定义我们 chunk 的名字

src
export function sum(num1, num2){
    return num1 + num2;
}

src/index.js
import(
  /* webpackChunkName:'bar' */
  "./bar"
  ).then(({sum: sum }) => {
    console.log('webpackPreload: ',sum(1,2));
  });

执行打包命令

yarn build

可以看到以下文件，我们刚刚引入的 bar.js 在打包后的加上了前缀

`webpackPreload` 预加载

预加载会在当前模块加载时立即以并行的方式加载该模块

src/index.jx
import(
  /* webpackChunkName:'bar' */
  /* webpackPreload: true */
  "./bar"
  ).then(({sum: sum }) => {
    console.log('webpackPreload: ',sum(1,2));
  });

可以看到我们的 bar 文件可以被正常加载并执行

`webpackPrefeatch` 预获取

webpackPrefeatch 和 webpackPrelaod 不太一样， webpackPrefeatch 会在浏览器空闲的时候进行下载

src/index.js
const button = document.createElement('button');
button.innerText = '加载bar';

button.addEventListener('click',() => {

  import(
    /* webpackChunkName: 'bar' */
    /* webpackPrefetch: true */
    "./bar"
  ).then(({sum: sum }) => {
    console.log('webpackPrefetch: ',sum(1,2));
  });
})

document.body.appendChild(button);