Proper JS minification in Webpack 4, how to implement?

Question

JavaScript

1) How much should the vendors file (libraries by type: JQ, Vue etc.) weigh on average, that is, how much will be acceptable, how much is already critical?
2) How much should a minified Vue.js file weigh?
3) How to properly include uglifyjs-webpack-plugin?
1.
Here I think everything is clear, I would like to know what size should be followed when building the project and connecting third-party libraries / plugins. Despite the fact that I do not have so many libraries / plugins - the weight is already 1.7mb ...
2.
I read in the Vue documentation that the file for the production version, vue.min.js, weighs 35kb + -. When I build it, it weighs 320kb + - ...
3.
I tried to do everything as indicated in the documentation- zero sense, nothing is minified... PS 'It means that something is connected wrong' - here is the code:

//создал переменную
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//подключил сам плагин(как указано в документации)
module.exports = {
   optimization: {
      minimizer: [
      new UglifyJsPlugin({
                test: /\.js(\?.*)?$/i,
            }),
      ]
   }
}

Here is a screenshot of what the BundleAnalyzerPlugin outputs:

spoiler

Answer 1

//vue.config.js
/** @format */

const path = require('path');
const SizePlugin = require('size-plugin');

const isProductionEnvFlag = process.env.NODE_ENV === 'production';
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
 
function resolveRealPath(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  outputDir: 'dist',
  filenameHashing: false,
  integrity: true,
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: (config) => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@components', resolveRealPath('src/components'))
      .set('@services', resolveRealPath('src/services'))
      .set('@views', resolveRealPath('src/views'))      
      .set('@router', resolveRealPath('src/router'));      

    const splitOptions = config.optimization.get('splitChunks');
    config.optimization.splitChunks(
      Object.assign({}, splitOptions, {
        maxAsyncRequests: 16,
        maxInitialRequests: 16,
        minChunks: 1,
        minSize: 30000,        
        automaticNameDelimiter: '~',        
        name: true,
        cacheGroups: {
          default: false,
          common: {
            name: `chunk-common`,
            minChunks: 2,
            priority: -20,
            chunks: 'initial',
            reuseExistingChunk: true,
          },
          element: {
            name: 'element',
            test: /[\\/]node_modules[\\/]element-ui[\\/]/,
            chunks: 'initial',
            priority: -30,
          },
        },
      }),
    );

    // https://github.com/webpack-contrib/webpack-bundle-analyzer
    if (process.env.npm_config_report) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
    }
  },
  configureWebpack: {
    plugins: [
      isProductionEnvFlag ? new SizePlugin() : () => {},
      isProductionEnvFlag ? new UglifyJSPlugin() : () => {},      
      isProductionEnvFlag ? new DuplicatePackageCheckerPlugin() : () => {},
      isProductionEnvFlag ? new PurgecssPlugin(
        {
          paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`,  { nodir: true }),
        }
      ) : () => {},

      ],
    optimization: {
        runtimeChunk: true
    } 
  },
  devServer: {
    port: 8088,
  },
};

Answer 2

On the second question:
So you have the regular version. Replace with vue.min.js
Or you can write mode: production in the webpack config. I can't tell you about UglifyJsPlugin.