关于webpack优化的几个插件介绍

以下都是我在vue项目中使用过关于webpack的几个插件

1、hard-source-webpack-plugin

HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）

安装：npm install --save-dev hard-source-webpack-plugin

配置：

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new HardSourceWebpackPlugin(),
        ]
      }
    }
  },

可选配置项

new HardSourceWebpackPlugin({
	//忽略缓存mini-css-extract-plugin模块
  	test: /mini-css-extract-plugin[\\/]dist[\\/]loader/,
    // cacheDirectory是在高速缓存写入。默认情况下，将缓存存储在node_modules下的目录中，因此如
    // 果清除了node_modules，则缓存也是如此
    cacheDirectory:'node_modules/.cache/hard-source/[confighash]',
    // Either an absolute path or relative to webpack's options.context.
    // Sets webpack's recordsPath if not already set.
    recordsPath:'node_modules/.cache/hard-source/[confighash]/records.json',
    // configHash在启动webpack实例时转换webpack配置，并用于cacheDirectory为不同的webpack配
    // 置构建不同的缓存
    configHash: function(webpackConfig) {
       // node-object-hash on npm can be used to build this.
       return require('node-object-hash')({sort:false}).hash(webpackConfig);
    },
    // 当加载器，插件，其他构建时脚本或其他动态依赖项发生更改时，hard-source需要替换缓存以确保输
    // 出正确。environmentHash被用来确定这一点。如果散列与先前的构建不同，则将使用新的缓存
    environmentHash: {
       root: process.cwd(),
       directories: [],
       files: ['package-lock.json','yarn.lock'],
    },
})

2、compression-webpack-plugin

compression-webpack-plugin是webpack压缩插件，在webpack搭建的vue项目中，引入该插件后，npm run build除了会生成压缩后的静态资源（JS、css），还会生成gz形式的JS、CSS。

安装 npm install --save-dev compression-webpack-plugin

配置：

const CompressionPlugin = require('compression-webpack-plugin')
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$/,
            // 超过10k才压缩
            threshold: 10240,
            // 是否删除源文件
            deleteOriginalAssets: false
          })
        ]
      }
    }
  }

配置文档： https://webpack.docschina.org/plugins/compression-webpack-plugin/

3、terser-webpack-plugin

主要用于webpack打包时自动去除console.log

如果你使用的是 webpack v5 或以上版本，你不需要安装这个插件。webpack v5 自带最新的 terser-webpack-plugin。如果使用 webpack v4，则必须安装 terser-webpack-plugin v4 的版本。

安装：npm install terser-webpack-plugin --save-dev

配置：

const TerserPlugin = require('terser-webpack-plugin') // 引入删除console插件
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        optimization: {
          minimizer: [
            new TerserPlugin({
              terserOptions: {
                ecma: undefined,
                warnings: false, // 传递true以在中返回压缩机警告result.warnings。使用该值可"verbose"获取更详细的警告。
                parse: {},
                compress: {
                  drop_console: true, // 移除console
                  drop_debugger: true, // 移除debugger
                  pure_funcs: ['console.log'] // 移除console
                }
              }
            })
          ]
        }
      }
    }
  },

配置选项：https://webpack.docschina.org/plugins/terser-webpack-plugin/

4、拆包splitChunks

关于splitChunks介绍

简单的来说就是Webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。

配置：

  chainWebpack(config) {



    config.when(process.env.NODE_ENV !== 'development', config => {

      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial' // only package third parties that are initially dependent
          },
          elementUI: {
            name: 'chunk-elementUI', // split elementUI into a single package
            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true
          }
        }
      })
      config.optimization.runtimeChunk('single')
    })
  }

我这里是吧element UI、常用的components进行拆包处理，你也可以根据你的需求进行拆包

5、配置路径别名alias

方便你引入各种文件

  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
        '@crud': resolve('src/components/Crud'),
        components: resolve('src/components'),
        images: resolve('src/assets/images'),
        '@Echarts': resolve('src/components/Echarts'),
        '@validate': resolve('src/utils/validate.js')
      }
    }
  },