时候我们一个chunk引入了多个js文件,导致打包后的chunk提交太大;再或者多个chunks引入了同一个js文件(例如jquery),此时jquery会分别打包进两个chunk中,导致文件重复打包,体积臃肿; 此时我们就需要拆分chunk,或从chunks中提取出公共的文件,以便提升页面加载的速度。 webpack.prod.js添加如下配置: hot.js的代码如下: main2.js的代码如下: 如需完整的代码,请查阅git仓库地址:optimization: {
splitChunks: {
chunks: 'all',//自动拆分chunks
},
}
import $ from 'jquery';
console.log($);
function hotTest() {
console.log('测试HMR1');
}
export default hotTest;
import $ from 'jquery';
console.log($);
https://gitee.com/seimin/xiaoming2qianduan-webpack5/tree/v5.17/