how to reduce vendor file size in webpack(after implemented all methods)

Viewed 2968

i have developed react app and on webpack i implemented different methods to reduce the size of bundle.like codespliting,dynamic imports,splitChunks,compression and uglifyJs etc but still my vendor size is 570 kb.
my webpack file

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CompressionPlugin = require('compression-webpack-plugin');
const VENDOR_LIBS =[
  'antd','axios','moment','rc-time-picker','react',
  'react-dom','react-ga','react-google-maps','react-loadable',
  'react-redux','react-router','react-router-dom','recompose','redux','redux-thunk'
];
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
    entry:{
      vendor: VENDOR_LIBS,
      main: './src/app.js',
    },
  output: {
      path: path.join(__dirname, 'public'),
      filename: '[name].chunkhash.bundle.js',
      chunkFilename: '[name].chunkhash.bundle.js',
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.s?css$/,
        use:  ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    },{
        test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: "file-loader",
    }
    ]
  },
  plugins: [ 
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      inject: true,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash(),
    new CompressionPlugin({
      algorithm: 'gzip',
      test : /\.js$|\.css$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
      threshold: 10240,
      minRatio: 0.8
    }),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      },
    })
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
          chunks: 'all',
          minChunks: 2
        },
      }
    },
    runtimeChunk: true,
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true,
        uglifyOptions: {
          compress: {
            inline: false
          }
        }
      }),
      new OptimizeCSSAssetsPlugin({})
    ],
  },
};

actually my webapp most of time open in mobiles devices only and most of them are 3g network so it is taking little bit more time.so is there any way can i reduce my vendor.js file.
i already implement brotli algo on server side so it is now 440 kb.
i want to reduce to 250 kb

1 Answers

Have you consider "bundle-loader"? This module will help you to chunk the critical JS. Naturally that require a bit of refactoring/architecture of your main: './src/app.js' Your module has to be loaded asynchronously.

https://github.com/webpack-contrib/bundle-loader

Also there are few automatisations webpack-4 does automatically for you if you inform mode: 'production', then you could avoid many of your plugins and have a cleaner config file.

Related