javascript - Unpredictable behaviors of webpack code splitting

Question

I have spent reasonable time now in understanding webpack code splitting and its splitchunksplugin. Still there are some unpredictable outputs which is frustrating for me. I believe there maybe some minor loopholes in my understanding where community can help me with.

I have two entry points with async modules

a.js

import { run } from "./app/app";
import ("lodash");
// import "bootstrap";
import "./main.scss";
import { AlertService } from "./app/alert.service";
import { ComponentService } from "./app/component.service";
const alertService = new AlertService();
const componentService = new ComponentService();
run(alertService, componentService);

b.js

import { run } from "./app/app";
import ("lodash");
// import ("bootstrap");
import "./main.scss";
import { AlertService } from "./app/alert.service";
import { ComponentService } from "./app/component.service";
const alertService = new AlertService();
const componentService = new ComponentService();
run(alertService, componentService);

My webpack config is as follows

module.exports = {
  entry: {
    a: './src/a.js',
    b: './src/b.js'
  },
  module: {
    rules: [
      {
        test: /.scss$/,
        use: [
          "style-loader", //3. Inject styles into DOM
          "css-loader", //2. Turns css into commonjs
          "sass-loader" //1. Turns sass into css
        ]
      },
      {
        test: /.html$/,
        use: ["html-loader"]
      },
      {
        test: /.(svg|png|jpg|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name].[hash].[ext]",
            outputPath: "imgs"
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html"
    }),
    new BundleAnalyzerPlugin()
  ],
  optimization: {
    minimize: false,
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        default: false,
        vendors: false
      }
    }
  }
};

Here I am targeting only initial chunks to be evaluated for optimization and also turned off every cache group. Now my understanding says that it should output two async chunks containing lodash and two sync entrypoint chunks but what it outputs is this:

Now if uncomment bootstrap from either of entry point chunks it outputs two async lodash chunks as I have expected it to. Output when uncomments bootstrap in a.js:

Answer 1

等待大神答复