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

文章目录

一文大白话讲清楚webpack基本使用------9------预加载之prefetch和preload
[1. 建议按文章顺序从头看，一看到底，豁然开朗](#1. 建议按文章顺序从头看，一看到底，豁然开朗)
[2. preload和prefetch的区别](#2. preload和prefetch的区别)
[2. prefetch的使用](#2. prefetch的使用)
[3. preload的使用](#3. preload的使用)
[4. webpackChunkName](#4. webpackChunkName)

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

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

第一篇：
一文大白话讲清楚啥是个webpack
第二篇：
一文大白话讲清楚webpack基本使用------1------完成webpack的初步构建
第三篇
一文大白话讲清楚webpack基本使用------2------css相关loader的配置和使用
第四篇
一文大白话讲清楚webpack基本使用------3------图像相关loader的配置和使用
第五篇
一文大白话讲清楚webpack基本使用------4------vue-loader的配置和使用
第六篇
一文大白话讲清楚webpack基本使用------5------babel的配置和使用
第七篇
一文大白话讲清楚webpack基本使用------6------热更新及其原理
第八篇
一文大白话讲清楚webpack基本使用------7------代码分离和懒加载
第九篇
一文大白话讲清楚webpack基本使用------8------开发环境和生产环境的配置和区别
然后看本篇，预加载之prefetch和preload

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，是因为都是因为使用魔法注释