webpack中的runtimeChunk

webpack 4 提供了 runtimeChunk 能让我们方便的提取 manifest，以前我们需要这样配置

new webpack.optimize.CommonsChunkPlugin({
  name: "manifest",
  minChunks: Infinity
});

现在只要一行配置就可以了

{
  runtimeChunk: true;
}

它的作用是将包含chunks 映射关系的 list单独从 app.js里提取出来，因为每一个 chunk 的 id 基本都是基于内容 hash 出来的，所以你每次改动都会影响它，如果不将它提取出来的话，等于app.js每次都会改变，导致缓存失效。

单独抽离 runtimeChunk 之后，每次打包都会生成一个runtimeChunk.xxx.js，其实这个文件非常的小，gzip 之后一般只有几 kb，但这个文件又经常会改变，我们每次都需要重新请求它，它的 http 耗时远大于它的执行时间了，所以建议不要将它单独拆包，而是将它内联到我们的 index.html 之中(index.html 本来每次打包都会变)。可以使用 inline-manifest-webpack-plugin或者 assets-webpack-plugin等来实现内联的效果。

const InlineManifestWebpackPlugin = require("inline-manifest-webpack-plugin");
new HtmlWebpackPlugin({
    template: paths.appHtml,
    filename: "index.html",
    // chunks sort by chunk Id
    chunksSortMode: "auto"
}),
// 注意一定要在HtmlWebpackPlugin之后引用
// inline 的name 和你 runtimeChunk 的 name保持一致
// if you changed the runtimeChunk's name, you need to sync it here
new InlineManifestWebpackPlugin("manifest"),