17、webpack代码分离--动态导入

动态导入（dynamic imports）

当涉及到动态代码拆分时，webpack 提供了两个类似的技术。对于动态导入，第一种，也是优先选择的方式是，使用符合 ECMAScript 提案 的 import() 语法。第二种，则是使用 webpack 特定的 require.ensure。

import() 调用会在内部用到 promises。如果在旧有版本浏览器中使用 import()，记得使用 一个 
polyfill 库（例如 es6-promise 或 promise-polyfill），来 shim Promise。

1、修改webpack.config.js

const path = require('path');
  const HTMLWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
     index: './src/index.js'
    },
    plugins: [
      new HTMLWebpackPlugin({
        title: 'Code Splitting'
     })
    ],
    output: {
      filename: '[name].bundle.js',
     chunkFilename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

2、这里使用了 chunkFilename，它决定非入口 chunk 的名称。想了解 chunkFilename 更多信息，请查看 output 相关文档。接着，更新我们的项目，移除掉那些现在不会用到的文件:

code-dynamic
|- package.json
|- webpack.config.js
|- /dist
|- /src
  |- index.js
|- /node_modules

现在，我们不再使用静态导入 lodash，而是通过使用动态导入来分离一个 chunk：

3、修改src/index.js

function getComponent() {
    return import( /* webpackChunkName: "lodash" */ 'lodash').then(_ => {
        var element = document.createElement('div');

        element.innerHTML = _.join(['Hello', 'webpack'], ' ');

        return element;
    }).catch(error => 'An error occurred while loading the component');
}

getComponent().then(component => {
    document.body.appendChild(component);
});

※ 在注释中使用了 webpackChunkName。这样做会导致我们的 bundle 被命名为 lodash.bundle.js ，而不是 [id].bundle.js 

4、编译运行

> npm run build

> [email protected] build D:\dev\work\webpackwork\code-dynamic
> webpack --config webpack.config.js --display-modules

Hash: 269509f5f1932b7dbb46
Version: webpack 4.33.0
Time: 955ms
Built at: 2019-06-12 20:05:08
                   Asset       Size  Chunks             Chunk Names
         index.bundle.js   2.21 KiB       0  [emitted]  index
              index.html  189 bytes          [emitted]
vendors~lodash.bundle.js   69.4 KiB       1  [emitted]  vendors~lodash
Entrypoint index = index.bundle.js
[0] ./src/index.js 409 bytes {0} [built]
[1] ./node_modules/lodash/lodash.js 527 KiB {1} [built]
[2] (webpack)/buildin/global.js 472 bytes {1} [built]
[3] (webpack)/buildin/module.js 497 bytes {1} [built]

lodash.js被打包到了vendors~ladash.bundle.js文件中