打包优化

基于"@vue/cli-service": "~5.0.0"的配置打包

默认打包配置

• 浏览器兼容性配置.browserslistrc：

Chrome >= 52
Firefox >= 78
Safari >= 13
Edge >= 88

• vue.config.js 配置如下：

const { defineConfig } = require("@vue/cli-service");
const path = require("path");
const port = process.env.port || process.env.npm_config_port || 9528; // dev port
const isDev = process.env.NODE_ENV === "development";
const isProd = process.env.NODE_ENV === "production";
const isMock = process.env.VUE_APP_MOCK === "true";

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false,
  lintOnSave: false,
  devServer: {
    port,
    open: false,
    client: {
      overlay: {
        warnings: false,
        errors: false,
      },
    },
    //代理本地接口地址
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: "http://192.168.1.127:18350/",
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
        bypass: (req) => {
          // mock 模式下，所有请求都走 mock 服务，不再向后端（target）发送请求，
          // 联调时，记得修改 VUE_APP_MOCK = 'false' 关掉 mock 模式
          if (isMock) return req.path;
        },
      },
    },
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error("webpack-dev-server is not defined");
      }
      // 按需加载 Mock
      if (isDev && isMock) {
        require("./mock/mock-server.js")(devServer.app);
      }
      return middlewares;
    },
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: process.env.VUETR_APP_NAME,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
  },
});

打包优化 - 拆分依赖

• 安装依赖：webpack-bundle-analyzer分析打包后依赖，thread-loader多线程打包。

pnpm add webpack-bundle-analyzer -D
pnpm add thread-loader -D

• vue.config.js 配置如下：
• 按照以下配置，提升打包速度，减少 vender.js 体积。

问题

浏览器低版本兼容失效了

const { defineConfig } = require("@vue/cli-service");
// const BundleAnalyzerPlugin =
//   require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const path = require("path");
const port = process.env.port || process.env.npm_config_port || 9528; // dev port
const isDev = process.env.NODE_ENV === "development";
const isProd = process.env.NODE_ENV === "production";
const isMock = process.env.VUE_APP_MOCK === "true";

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false,
  lintOnSave: false,
  devServer: {
    port,
    open: false,
    client: {
      overlay: {
        warnings: false,
        errors: false,
      },
    },
    //代理本地接口地址
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: "http://192.168.1.127:18350/",
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
        bypass: (req) => {
          // mock 模式下，所有请求都走 mock 服务，不再向后端（target）发送请求，
          // 联调时，记得修改 VUE_APP_MOCK = 'false' 关掉 mock 模式
          if (isMock) return req.path;
        },
      },
    },
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error("webpack-dev-server is not defined");
      }
      // 按需加载 Mock
      if (isDev && isMock) {
        require("./mock/mock-server.js")(devServer.app);
      }
      return middlewares;
    },
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: process.env.VUETR_APP_NAME,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
    optimization: {
      splitChunks: {
        chunks: "all",
        minSize: 20000, // 20KB
        maxSize: 250000, // 250KB
        cacheGroups: {
          // 核心第三方库单独打包
          vue: {
            test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,
            name: "chunk-vue",
            priority: 20,
          },
          // UI库单独打包
          elementUI: {
            test: /[\\/]node_modules[\\/]element-ui[\\/]/,
            name: "chunk-element",
            priority: 15,
          },
          // 其他node_modules打包
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: "chunk-vendors",
            priority: 10,
            reuseExistingChunk: true,
          },
          // 公共模块
          common: {
            name: "chunk-common",
            minChunks: 2,
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      },
    },
    // plugins: [new BundleAnalyzerPlugin()],
  },
  chainWebpack: (config) => {
    config.module.rule("js").use("thread-loader").loader("thread-loader");
  },
});