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

最新推荐文章于 2024-08-10 07:42:46 发布

前端李小白

最新推荐文章于 2024-08-10 07:42:46 发布

阅读量1.7k

点赞数

分类专栏： webpack 文章标签： webpack优化

本文链接：https://blog.csdn.net/qq_42268364/article/details/119210660

版权

本文介绍了在webpack优化中常用的几个插件，包括HardSourceWebpackPlugin用于提高构建速度，CompressionWebpackPlugin实现资源压缩，AutomaticPrefetchPlugin自动移除未使用的模块，splitChunks拆分和合并代码，以及设置路径别名alias简化文件引入。这些插件的详细安装和配置方法也在文中提及。

摘要由CSDN通过智能技术生成

以下都是我在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