如何实现按需加载，需要使用动态加载
webpack 如何实现异步加载

动态加载

需要使用 import()
import 是ES6的草案
webpack会认为用这个导入的模块是需要异步导入的，可以实现动态加载
浏览器会使用JSOP的方式远程去读取一个js模块
import() 会返回一个promis

案例1
动态加载插件
index.html的源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <button class="box">button</button>
  10. </body>
  11. </html>

index.js的源码

  1. let box = document.getElementsByClassName('box')[0];
  2. box.onclick = async function(){
  3.     console.log("box的单击事件触发")
  4.     const { compact } = await import(/* webpackChunkName:"lodash" */"lodash-es"); // lodash-es是使用es6导出的方式导出的，lodash是commonJs的方式导出的
  5.     let a = compact([0,"",1,2,false,50])
  6.     console.log(a)
  7. }

案例二
动态加载自己的代码
index.html 代码与上面的不变
index.js的代码

  1. let box = document.getElementsByClassName('box')[0];
  2. box.onclick = async function(){
  3.     console.log("box的单击事件触发")
  4.     const {cons} = await import("./a")
  5.     console.log(cons)
  6.     cons()
  7. }

a.js 的代码

  1. export function  cons(){
  2.     console.log("异步函数启动")
  3. }

案例三
先导入，在动态加载
index.js 的代码

  1. let box = document.getElementsByClassName('box')[0];
  2. box.onclick = async function(){
  3.     console.log("box的单击事件触发")
  4.     const {cons} = await import("./util") // 此处不再导入a.js 而是导入util.js
  5.     console.log(cons)
  6.     cons()
  7. }

a.js 的代码

  1. export function  cons(){
  2.     console.log("异步函数启动")
  3. }

util.js的代码

  1. export { chunk } from "lodash-es";