How to optimize webpack configuration in

Preface:

In daily development, we cannot do without the packaging tool webpack, but different configurations will affect the running and building time of our project and the size of the project package after packaging. This article records the configuration I have used to optimize the webpack.

Note: Based on the previous article in this column, add configuration

1. Compress pictures

1. Download the dependency first

npm install --save-dev image-webpack-loader

2. Define the setting value above

①Default settings: (4M pictures are compressed to 1.4M using the default settings)

const defaultOptions = {
  bypassOnDebug: true,
};

②Custom settings

 const customOptions = {
      mozjpeg: {
        progressive: true,
        quality: 50
      },
      optipng: {
        enabled: true,
      },
      pngquant: {
        quality: [0.5, 0.65],
        speed: 4
      },
      gifsicle: {
        interlaced: false,
      },
      // Don't write this item if you don't support WEBP      webp: {
        quality: 75
      }
  }

3. Add configuration to chainWebpack:

chainWebpack: config => {
 
    ('images') 
        .test(/\.(gif|png|jpe?g|svg)$/i)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options(customOptions)
        .end() 
 
  }

Can you switch to default or customization in options?

2. Public code extraction:

Add configuration to configureWebpack:

configureWebpack: (config) => {
     = {
      splitChunks: {
        cacheGroups: {
          vendor: {
            chunks: "all",
            test: /node_modules/,
            name: "vendor",
            minChunks: 1,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 100,
          },
          common: {
            chunks: "all",
            test: /[\\/]src[\\/]js[\\/]/,
            name: "common",
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 60,
          },
          styles: {
            name: "styles",
            test: /\.(sa|sc|c)ss$/,
            chunks: "all",
            enforce: true,
          },
          runtimeChunk: {
            name: "manifest",
          },
        },
      },
    };
}

3. Compress the code and remove the console output

1. Download the dependency first

npm install uglifyjs-webpack-plugin --save-dev

2. Introduce dependencies in the first line

const UglifyPlugin = require("uglifyjs-webpack-plugin");

3. Add configuration in configureWebpack:

 (
      new UglifyPlugin({
        uglifyOptions: {
          //The console is automatically deleted in the production environment          compress: {
            drop_debugger: true,
            drop_console: true,
            pure_funcs: [""],
          },
        },
        sourceMap: false,
        parallel: true,
      })
    );

The above is the detailed content of the method of optimizing webpack configuration in China. For more information about optimizing webpack, please pay attention to my other related articles!