webpack4为什么打包后的模块不是预期的效果？

Question

主要分为2个入口:home和about

home中的main.js

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "../assets/css/index.css";
import App from "./App";
Vue.use(ElementUI);

const page1 = () =>
  import(/* webpackChunkName: "page1" */ "../common-async").then(comp => {
    Page1 = comp;
  });

new Vue({
  render: h => h(App)
}).$mount("#app");

about中的main.js

import $ from "../assets/js/jquery";
import _ from "lodash";
import Vue from "vue";

new Vue({
  render: h => h(<div>111</div>)
}).$mount("#app");

common-async.js将会异步加载处理的文件

import $ from "./assets/js/jquery";
import _ from "lodash";
import Vue from "vue";

_.find([12, 23, 34], item => item === 12);

webpack中的配置

entry: {
    'home': path.resolve(__dirname, './src/home/main.js'),
    'about': path.resolve(__dirname, './src/about/main.js'),
},
output: {
    path: path.resolve(__dirname, './build'),
    publicPath: '/dev/',
    filename: '[name].[hash].js',
},

optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCssAssetsPlugin({}),
    ],
    splitChunks: {
      chunks: "all",
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 5,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: 10,
          reuseExistingChunk: true
        },
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          priority: 20,
        },
      }
    }
  },

打包结果：

那么问题来了，以下是我的疑惑

1.为什么在common-async.js中导入的vue这个module没有新生成vendor~about~home~common-async.xxxxx.js这个chunk？

2.当在home里加上

import $ from "../assets/js/jquery";
import _ from "lodash";

打包结果很神奇

common-async.js里面的module都没有被提取，打包后的这个文件看到的都是对于导入包的引用，为什么？

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _assets_js_jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./assets/js/jquery */ "./src/assets/js/jquery.js");
/* harmony import */ var _assets_js_jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_assets_js_jquery__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash */ "./node_modules/_lodash@4.17.15@lodash/lodash.js");
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vue */ "./node_modules/_vue@2.6.10@vue/dist/vue.runtime.esm.js");

刚上手webpack太多疑惑了，只能慢慢啃，希望能得到大佬的解答，万分感谢！