runtime 指的是 webpack 的运行环境(具体作用就是模块解析, 加载) 和 模块信息清单, 模块信息清单在每次有模块变更(hash 变更)时都会变更, 所以我们想把这部分代码单独打包出来, 配合后端缓存策略, 这样就不会因为某个模块的变更导致包含模块信息的模块
// webpack.config.js (for webpack 4)
module.exports = {
optimization: {
runtimeChunk: true,
},
};
// webpack.config.js (for webpack 3)
module.exports = {
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ‘vendor’,
minChunks: module => module.context &&
module.context.includes(‘node_modules’),
}),
// This plugin must come after the vendor one (because webpack
// includes runtime into the last chunk)
new webpack.optimize.CommonsChunkPlugin({
name: ‘runtime’,
// minChunks: Infinity means that no app modules
// will be included into this chunk
minChunks: Infinity,
}),
],
};
runtime 写入 html 减少请求
new HtmlWebpackPlugin({
title: “HappyEasyGo”,
template: “./index.html”,
filename: path.resolve(__dirname, “./build/index.html”),
// chunksSortMode: ‘dependency’,
inlineSource: ‘runtime.+\\.js’,
}),
new InlineSourcePlugin(HtmlWebpackPlugin),