作用:打包時生成一個體積很小runtime.xxx.js文件欢搜,用作映射其他chunk文件,目的是更新后谴轮,以較小的代價利用緩存炒瘟,提升頁面加載速度。
結(jié)合script-ext-html-webpack-plugin
插件可將runtime文件內(nèi)聯(lián)進(jìn)html文件第步,減少請求
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ScriptExtHtmlWebpackPlugin= require('script-ext-html-webpack-plugin')
module.exports = {
mode: 'production',
entry: {
index: './src/index.js'
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
devtool: 'inline-source-map',
plugins: [
new HtmlWebpackPlugin({
title: 'Caching',
}),
new CleanWebpackPlugin({cleanStaleWebpackAssets: false}),
new ScriptExtHtmlWebpackPlugin({ //結(jié)合`script-ext-html-webpack-plugin`插件可將runtime文件內(nèi)聯(lián)進(jìn)html文件
inline: /runtime~.+\.js$/ //正則匹配runtime文件名
})
],
optimization: {
runtimeChunk: true,
splitChunks: {
chunks: 'all'
}
}
};