4.11.1 用 Webpack 实现按需加载

问题一： 用 Webpack 实现按需加载？

Webpack 内置了强大的分割代码的功能去实现按需加载，实现起来非常简单。

举例说明

现在需要做这样一个进行了按需加载优化的网页：

• 网页首次加载时只加载main.js文件，网页会展示一个按钮，main.js文件中只包含监听按钮事件和加载按需加载的代码。
• 当按钮被点击时才去加载被分割出去的show.js文件，加载成功后再执行show.js里的函数。

其中main.js文件内容如下：

window.document.getElementById('btn').addEventListener('click', function () {
  // 当按钮被点击后才去加载 show.js 文件，文件加载成功后执行文件导出的函数
  import(/* webpackChunkName: "show" */ './show').then((show) => {
    show('Webpack');
  })
});

show.js文件内容如下：

module.exports = function (content) {
  window.alert('Hello ' + content);
};

代码中最关键的一句是import(/* webpackChunkName: "show" */ './show')，Webpack 内置了对import(*)语句的支持，当 Webpack 遇到了类似的语句时会这样处理：

• 以./show.js为入口新生成一个 Chunk；
• 当代码执行到import所在语句时才会去加载由 Chunk 对应生成的文件。
• import返回一个 Promise，当文件加载成功时可以在 Promise 的then方法中获取到show.js导出的内容。

在使用import()分割代码后，你的浏览器并且要支持Promise API才能让代码正常运行， 因为import()返回一个 Promise，它依赖 Promise。对于不原生支持 Promise 的浏览器，你可以注入 Promise polyfill。

/* webpackChunkName: "show" */的含义是为动态生成的 Chunk 赋予一个名称，以方便我们追踪和调试代码。 如果不指定动态生成的 Chunk 的名称，默认名称将会是[id].js。/* webpackChunkName: "show" */是在 Webpack3 中引入的新特性，在 Webpack3 之前是无法为动态生成的 Chunk 赋予名称的。

为了正确的输出在/* webpackChunkName: "show" */中配置的 ChunkName，还需要配置下 Webpack，配置如下：

module.exports = {
  // JS 执行入口文件
  entry: {
    main: './main.js',
  },
  output: {
    // 为从 entry 中配置生成的 Chunk 配置输出文件的名称
    filename: '[name].js',
    // 为动态加载的 Chunk 配置输出文件的名称
    chunkFilename: '[name].js',
  }
};

其中最关键的一行是chunkFilename: '[name].js',，它专门指定动态生成的 Chunk 在输出时的文件名称。 如果没有这行，分割出的代码的文件名称将会是[id].js。