前端工程化常见优化配置、插件

工程化配置

Plugin

1. 去除未使用的css purgecss-webpack-plugin

Loader

1. 压缩图片质量 image-webpack-loader

rules: [{
  test: /.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.90],
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75
        }
      }
    },
  ],
}]

配置项

1. 开启公共模块分包

optimization: {
    splitChunks: {
        minSize: 3 * 1024,
        chunks: 'all',
        name: 'common'
    }
}

2. 开启构建缓存

// webpack5
cache: {
    type: 'filesystem'
}

// webpack4
cache: true

低于webpack@4版本的可使用hard-source-webpack-plugin