用webpack实现模块懒加载、预取/预加载

模块懒加载本身与webpack没有关系，webpack可以让懒加载的模块代码打包到单独的文件中，实现真正的按需加载。webpack会自动对异步代码进行分割。

示例代码如下：

function getComponent() {
    return import(/* webpackChunkName: "lodash" */ 'lodash').then(({default: _})=>{
        var element = document.createElement('div')
        element.innerHTML = _.join(['a','b'],'-')
        return element
    })
}

document.addEventListener('click', ()=>{
    getComponent().then(element => {
        document.body.appendChild(element)
    })
})

需要配置@babel/preset-env的"useBuiltIns": "usage"

{
   "presets": [
     ["@babel/preset-env",{
       "targets": {
          "chrome": "67"
        },
        "useBuiltIns": "usage",
        "corejs": "3"
     }
     ],
     "@babel/preset-react"
   ],
    "plugins": [
      "@babel/plugin-syntax-dynamic-import"
    ]
}

执行打包指令，打包后的文件如下：

生成了vendors~lodash.js文件。
浏览器打开打包后的html文件，查看Network如下：

点击后才会加载vendors~lodash.js

实现了模块按需加载。

异步函数的方式：

async function getComponent(){
    const { default: _} = await import(/* webpackChunkName: "lodash" */ 'lodash')
    const element = document.createElement('div')
    element.innerHTML = _.join(['a','b'],'-')
    return element
}


document.addEventListener('click', ()=>{
    getComponent().then(element => {
        document.body.appendChild(element)
    })
})

webpackPrefetch 、webpackPreload

与 prefetch 指令相比，preload 指令有许多不同之处：

• preload chunk 会在父 chunk 加载时，以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。
• preload chunk 具有中等优先级，并立即下载。prefetch chunk 在浏览器闲置时下载。
• preload chunk 会在父 chunk 中立即请求，用于当下时刻。prefetch chunk 会用于未来的某个时刻。
• 浏览器支持程度不同。

async function getComponent(){
    const { default: _} = await import(/* webpackChunkName: "lodash", webpackPrefetch: true */ 'lodash')
    const element = document.createElement('div')
    element.innerHTML = _.join(['a','b'],'-')
    return element
}