vue 配置vue.config.js 优化

鸿是江边鸟，曾是心上人

已于 2024-02-20 17:17:24 修改

阅读量1.2k

点赞数 10

文章标签： vue.js javascript 前端

于 2024-01-19 17:17:15 首次发布

本文链接：https://blog.csdn.net/m0_56590688/article/details/135692400

版权

1.压缩js ，去除打印信息。

module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true, // 确保启用了压缩
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            // 在这里放入你的自定义Terser选项
            compress: {
              drop_console: true, // 例如，移除console.log语句
              // 更多Terser的压缩选项...
            },
          },
        }),
      ],
    },
  },
};

2.去掉map文件

这个配置用于控制是否生成生产环境的源代码映射文件，通常在生产环境中，我们会将其关闭以减少打包后的文件体积。

module.exports = {
  productionSourceMap: false
};

3.去掉eslint 检查

module.exports = {
 // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
  lintOnSave: false,
};

4. `config.devtool = "source-map"`

这个配置项是 Webpack 的一个选项，用于设置开发环境下生成的 Source Map 的类型。
将其设置为 "source-map" 会生成一个独立的 Source Map 文件，以 .map 结尾，用于将编译后的代码映射回原始源代码。
使用 "source-map" 类型的 Source Map 提供了最好的调试体验，因为它会生成详细的映射文件，可以精确地将错误定位到源代码的位置。
在开发环境中开启 Source Map 有助于提高调试效率，但会增加构建时间和打包后文件的体积。

 configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production'
      config.devtool = "source-map";
    } else {
      // 为开发环境修改配置...
      config.mode = 'development'
    }
}

5. `config.plugins.delete("prefetch").delete("preload")`

config.plugins.delete("prefetch")：这行代码删除了 Vue CLI 默认配置中的 prefetch 插件。prefetch 插件用于在浏览器空闲时提前加载下一个页面的资源，以提升用户体验。但在某些情况下，预加载可能会影响性能，因此你可以通过这行代码将其删除，以禁用该功能。
config.plugins.delete("preload")：这行代码删除了 Vue CLI 默认配置中的 preload 插件。preload 插件用于在页面加载过程中提前加载指定资源，以加快页面加载速度。和 prefetch 类似，你也可以通过这行代码将其删除，以禁用预加载功能。

configureWebpack: config => { 
   config.plugins.delete("prefetch").delete("preload")
}

6.代码分割

vendor：这个配置用于将来自 node_modules 中的模块打包到单独的 vendor 块中。chunks: 'all' 表示将所有模块都考虑到拆分中，test: /node_modules/ 表示匹配来自 node_modules 的模块，name: 'vendor' 设置了生成的块的名称，minChunks: 1 表示最少被引用一次才会被拆分出去。
common：这个配置用于将应用程序自身的公共模块打包到单独的 common 块中。chunks: 'all' 表示将所有模块都考虑到拆分中，test: /[\\/]src[\\/]js[\\/]/ 表示匹配应用程序中的 src/js/ 目录下的模块，name: 'common' 设置了生成的块的名称，minChunks: 2 表示至少被引用两次才会被拆分出去。
styles：这个配置用于将样式文件打包到单独的 styles 块中。name: 'styles' 设置了生成的块的名称，test: /\.(sa|sc|c)ss$/ 表示匹配样式文件，chunks: 'all' 表示将所有模块都考虑到拆分中，enforce: true 表示强制执行拆分。
runtimeChunk：这个配置用于将 Webpack 的运行时代码打包到单独的 manifest 块中，以防止重复加载。name: 'manifest' 设置了生成的块的名称。

   //代码分割（splitChunks）进行了配置，主要用于将代码拆分为不同的块，以提高应用的性能和加载速度
    config.optimization = {
      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'
          }
        }
      }
    }

7.js文件内容改变的时候改变文件hash

module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.output = {
        ...config.output,
        // 设置输出文件名，只有当文件内容发生变化时，才会改变哈希值
        filename: 'js/[name].[contenthash:8].js',
        chunkFilename: 'js/[name].[contenthash:8].js',
      };
    }
  }
};

8.css文件内容改变的时候改变文件hash

  css: {
    extract: {
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].css',
    },
 }

9.gzip压缩 compression-webpack-plugin

在这个配置中：

filename：设置压缩后的文件名，这里采用了 [path][base].gz，表示将原始文件的路径和文件名保持不变，并在文件名后面添加 .gz 扩展名。
algorithm：设置压缩算法，这里使用了 gzip 算法。
test：设置要压缩的文件类型，这里配置了压缩 JavaScript、CSS、HTML 和 SVG 文件。
threshold：设置文件大小的阈值，只有大于等于该阈值的文件才会进行压缩，这里设置为 10KB。
minRatio：设置压缩比例的阈值，只有压缩后的文件大小与原始文件大小的比例达到指定的阈值以上才会进行压缩，这里设置为 0.8，表示压缩比例达到 80% 以上才会进行压缩。

通过以上配置，就可以使用 compression-webpack-plugin 插件对输出的 JavaScript、CSS、HTML 和 SVG 文件进行压缩，并生成对应的 .gz 文件。

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

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.(js|css|html|svg)$/,
        threshold: 10240, // 大于等于10kb的文件才进行压缩
        minRatio: 0.8, // 压缩比例达到0.8以上才进行压缩
      })
    ]
  }
};

10.压缩css `optimize-css-assets-webpack-plugin`

optimize-css-assets-webpack-plugin 可以用于在 webpack 构建过程中优化和压缩 CSS 资源。它可以帮助你定制 CSS 压缩的行为，包括压缩选项和其他配置

npm install optimize-css-assets-webpack-plugin --save-dev

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new OptimizeCSSAssetsPlugin({
          cssProcessorOptions: {
            // 在这里放入你的自定义 CSS 压缩选项
            discardComments: { removeAll: true }, // 移除注释
            // 更多 CSS 压缩选项...
          }
        })
      ]
    }
  }
};

在这个配置中：