Правильная минификация JS в Webpack 4, как реализовать?

Question

[VegasChickiChicki]

1) Сколько в среднем должен весить файл vendors(библиотеки по типу: JQ, Vue etc.), то есть, сколько будет приемлемо, сколько уже критично?
2) Сколько должен весить минифицированный фал Vue.js?
3) Как правильно подключить uglifyjs-webpack-plugin?

1.
Тут я думаю все понятно, хотелось бы узнать какого размера следует придерживаться при сборке проекта и подключении сторонних библиотек\плагинов. При том что у меня не так много библиотек\плагинов - вес уже 1.7мб...
2.
Прочитал в документации Vue, что файл для продакшен версии, vue.min.js весит 35кб+-. У меня же при сборке он весит 320кб+-...
3.
Попробовал сделать все как указано в документации - толку ноль, ничего не минифицируется... P.S 'Значит что-то не так подключил' - вот код:

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

Вот скриншот того что выдает BundleAnalyzerPlugin:

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

[Yan Markov]

По второму вопросу:

Сколько весит вью

Значит, у тебя обычная версия. Замени на vue.min.js
Либо можешь написать в конфиге вебпака mode: production. По UglifyJsPlugin не могу подсказать.

Comments

[VegasChickiChicki]

mode: production и так стоит, и в этом и есть проблема. В доках Vue написано, что при этом моде вебпак должен сжать Vue, но не сжимает. А UglifyJsPlugin просто не хочет работать, лучшее чего я смог добиться, так это просто сжать файл app.js, остальные файлы он так и не минифицирует.