The problem of lazy loading and repeated packaging in vue

A package typed out by lazy loading through vue, in which a js typed the duplicate package into it, how can it be separated?

this is my webpack plugins configuration

plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
  "process.env": env
}),
// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  },
  sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
  filename: utils.assetsPath("css/[name].[contenthash].css")
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
  cssProcessorOptions: {
    safe: true
  }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
  filename: config.build.index,
  template: "index.html",
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier-sharpoptions-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: "dependency"
}),
// keep module.id stable when vender modules does not change
new webpack.HashedModuleIdsPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
  name: "vendor",
  minChunks: function(module) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(path.join(__dirname, "../node_modules")) === 0
    )
  }
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
  name: "manifest",
  minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/-sharpextra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
  name: "app",
  async: "vendor-async",
  children: true,
  minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, "../static"),
    to: config.build.assetsSubDirectory,
    ignore: [".*"]
  }
])

]

Mar.15,2022
Menu