webpack 预加载

webpack 预加载是在异步加载的情况下，配置 webpackPrefetch: true/webpackPreload: true

1、安装 @babel/plugin-syntax-dynamic-import

2、在 .babelrc 文件中配置

"plugins": [
  // 允许 babel 去翻译 import 异步加载文件
  "@babel/plugin-syntax-dynamic-import"
]

3、在文件中使用

// 异步引入 lodash 第三方文件
// 异步引入 lodash 第三方文件
function getComponent () {
  return import(/* webpackPrefetch: true */ 'lodash')
    .then((_) => {
      const element = document.createElement('div')
      element.innerHTML = _.join(['tang', 'li', 'he'], '-');
      return element
    })
}

// 每次点击页面时，动态引入 lodash 第三方文件，并执行如下代码
document.addEventListener('click', () => {
  getComponent()
    .then((element) => {
      document.body.appendChild(element)
    })
}, false )

prefetch 与 preload 的区别为 prefetch 是等浏览器将主文件下载完后，在下载 prefetch 的文件，而 preload 则是一起下载（结果要在控制台的 NetWork 下的 All 查看， js 下是查看不到的）