一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload以及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时使用魔法注释

import(
    /* webpackPrefetch:true */  //这里通过魔法注释，标明为prefetch
    './modulejs/dynamic.js'
    ).then(res=>{//通过import动态引入返回的是一个promise对象，then方法里面的res就是我们dynamic.js 里面export出来的对象
    res.addOnePToBody()
})

• 然后我们重新构建

npm run build

• 我们运行index.html,打开调试器Elements，发现里面多了一个<link rel=“prefetch” as=“script” href='xxx.js">
  

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

3. preload的使用

• preload的使用方式跟prefetch是一样的，通过魔法注释
• 我们直接上代码

import(
        /* webpackPreload:true */  //这里通过魔法注释，标明为preload
        './modulejs/dynamic.js'
        ).then(res=>{//通过import动态引入返回的是一个promise对象，then方法里面的res就是我们dynamic.js 里面export出来的对象
        res.addOnePToBody()
    })

• 更好的验证效果，我们dynamic.js里面新加一个函数

function sayHello(){
    console.log('I`m sayHello from dynamic.js loade by preloade')
}

• 然后再main.js里面动态引用引用

import(
   
    './modulejs/dynamic.js'
    ).then(res=>{//通过import动态引入返回的是一个promise对象，then方法里面的res就是我们dynamic.js 里面export出来的对象
    res.sayHello()
})

• 然后我们重新构建

npm run build

• 在浏览器里面运行index.html，发现dynamic.js的chunkJS直接被加载了
  

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

4. webpackChunkName

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

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

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

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

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

import(
    /* webpackChunkName:"rename-dynamic" */
    './modulejs/dynamic.js'
    ).then(res=>{//通过import动态引入返回的是一个promise对象，then方法里面的res就是我们dynamic.js 里面export出来的对象
    res.sayHello()
})

• 然后我们重新构建

npm run build

• 发现构建的chunkJS已经加上了rename-dynamic前缀
  

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