vue3项目性能优化(webpack版本)

1.开启gzip优化

        1、在 vue.config.js 中进行引入

const CompressionPlugin = require("compression-webpack-plugin"); //引入gzip压缩插件

        2、 在 configureWebpack 配置项中进行使用

configureWebpack: (config) => {
    return {
      plugins: [
        new CompressionPlugin({
          //此插件不能使用太高的版本，否则报错：TypeError: Cannot read property 'tapPromise' of undefined
          // filename: "[path][base].gz", // 这种方式是默认的，多个文件压缩就有多个.gz文件，建议使用下方的写法
          filename: "[path].gz[query]", //  使得多个.gz文件合并成一个文件，这种方式压缩后的文件少，建议使用
          algorithm: "gzip", // 官方默认压缩算法也是gzip
          // test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正则给匹配到的文件做压缩，这里是给html、css、js以及字体（.ttf和.woff和.eot）做压缩
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), // 使用正则给匹配到的文件做压缩
          threshold: 10240, //以字节为单位压缩超过此大小的文件，使用默认值10240吧
          minRatio: 0.8, // 最小压缩比率，官方默认0.8
          //是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。以防：
          // 假如出现访问.gz文件访问不到的时候，还可以访问源文件双重保障
          deleteOriginalAssets: true,
        }),
      ],

    };
  },

2.开启打包分离操作（将第三方包中比较大的包进行拆分）

      1、在 vue.config.js 的 configureWebpack 进行配置，同开启 gzip 操作相同。

configureWebpack: (config) => {
    return {
      plugins: [
      // 开启分离 js
      optimization: {
        runtimeChunk: "single", //runtimeChunk可选值有：true或'multiple'或'single'
        splitChunks: {
          chunks: "all", //可选值：all，async 和 initial。
          maxInitialRequests: Infinity, // 最大并行请求数
          minSize: 20000, // 引入的模块大于20kb才做代码分割，官方默认20000，这里不用修改了
          maxSize: 100000, // 若引入的模块大于100kb，则告诉webpack尝试再进行拆分
          cacheGroups: {
            vendor: {
              test: /[\/]node_modules[\/]/, // 指定是node_modules下的第三方包
              name: "chunk-vendors",
              chunks: "all",
              priority: -10,
            },
          },
        },
      },
    };
  },

3.开启线上环境打包不携带 console 相关信息

     1. 需要先安装 transform-remove-console 插件，自行安装

     2. 在 babel.config.js 文件中进行使用

let plugins = [];

/**如果是生产环境就添加这个插件,清除全部的console.log() */
if (process.env.NODE_ENV === "production") {
  plugins.push("transform-remove-console");
}

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [...plugins],
};

3.vue.config.js 完整代码

const { defineConfig } = require("@vue/cli-service");
const path = require("path");
const timeStamp = new Date().getTime();
const CompressionPlugin = require("compression-webpack-plugin"); //引入gzip压缩插件
// const productionGzipExtensions = ["js"];
module.exports = defineConfig({
  outputDir: process.env.NODE_ENV === "production" ? "dist" : "dist_offline", //打包后的项目目录名称
  transpileDependencies: true,
  lintOnSave: false,
  chainWebpack: (config) => {
    config.module
      .rule("worker-loader")
      .test(/\.worker\.js$/)
      .use({
        loader: "worker-loader",
        options: {
          inline: true,
        },
      })
      .loader("worker-loader")
      .end();
  },
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
  devServer: {
    // host: "localhost",
    port: 7859,
    // client: {
    //   webSocketURL: "wss://newapi.xigyu.com:5858",
    // },
    // headers: {
    //   "Access-Control-Allow-Origin": "*",
    // },
  },
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/assets/css/public.less")],
    },
  },
  configureWebpack: (config) => {
    //   // 开发环境不配置
    //   if (process.env.NODE_ENV !== "production") return;
    //   // 生产环境才去配置
    return {
      plugins: [
        new CompressionPlugin({
          //此插件不能使用太高的版本，否则报错：TypeError: Cannot read property 'tapPromise' of undefined
          // filename: "[path][base].gz", // 这种方式是默认的，多个文件压缩就有多个.gz文件，建议使用下方的写法
          filename: "[path].gz[query]", //  使得多个.gz文件合并成一个文件，这种方式压缩后的文件少，建议使用
          algorithm: "gzip", // 官方默认压缩算法也是gzip
          // test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正则给匹配到的文件做压缩，这里是给html、css、js以及字体（.ttf和.woff和.eot）做压缩
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), // 使用正则给匹配到的文件做压缩
          threshold: 10240, //以字节为单位压缩超过此大小的文件，使用默认值10240吧
          minRatio: 0.8, // 最小压缩比率，官方默认0.8
          //是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。以防：
          // 假如出现访问.gz文件访问不到的时候，还可以访问源文件双重保障
          deleteOriginalAssets: true,
        }),
      ],

      // 开启分离 js
      optimization: {
        runtimeChunk: "single", //runtimeChunk可选值有：true或'multiple'或'single'
        splitChunks: {
          chunks: "all", //可选值：all，async 和 initial。
          maxInitialRequests: Infinity, // 最大并行请求数
          minSize: 20000, // 引入的模块大于20kb才做代码分割，官方默认20000，这里不用修改了
          maxSize: 100000, // 若引入的模块大于100kb，则告诉webpack尝试再进行拆分
          cacheGroups: {
            vendor: {
              test: /[\/]node_modules[\/]/, // 指定是node_modules下的第三方包
              name: "chunk-vendors",
              chunks: "all",
              priority: -10,
            },
          },
        },
      },
    };
  },
});