webpack5自动分割代码 webpack分块打包

时候我们一个chunk引入了多个js文件，导致打包后的chunk提交太大；再或者多个chunks引入了同一个js文件（例如jquery），此时jquery会分别打包进两个chunk中，导致文件重复打包，体积臃肿；

此时我们就需要拆分chunk，或从chunks中提取出公共的文件，以便提升页面加载的速度。

webpack.prod.js添加如下配置：

optimization: {
  splitChunks: {
    chunks: 'all',//自动拆分chunks
  },
}

hot.js的代码如下：

import $ from 'jquery';
console.log($);
function hotTest() {
  console.log('测试HMR1');
}
export default hotTest;

main2.js的代码如下：

import $ from 'jquery';
console.log($);

如需完整的代码，请查阅git仓库地址：

https://gitee.com/seimin/xiaoming2qianduan-webpack5/tree/v5.17/