10 webpack import()原理

动态导入原理

用于动态加载的import()方法

• 这个功能可以实现按需加载我们的代码，并且使用了promise式的回调，获取加载的包
• 在代码中所有被import()的模块，都将打成一个单独的包，放在chunk存储的目录下。在浏览器运行到这一行代码时，就会自动请求这个资源，实现异步加载

    // 这里是一个简单的demo。
    // 可以看到，import()的语法十分简单。该函数只接受一个参数，就是引用包的地址
    import('lodash').then(_ => {
      // Do something with lodash (a.k.a '_')...
     })

webpack中如何实现动态导入？

1. 使用import(/** webpackChunkName: "lodash" **/ 'lodash').then(_ => {})，同时可以在webpack.config.js中配置一下output的chunkFilename为[name].bunld.js将要导入的模块单独抽离到一个bundle中（注意 chunkFilename 应为 [name].bundle.js），以此实现代码分离。
2. 使用async，由于import()返回的是一个promise, 因此我们可以使用async函数来简化它，不过需要babel这样的预处理器及处理转换async的插件。const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');