2022-03-02 vue.config.js 優化打包配置參考

const path = require("path");
// gzip壓縮
const CompressionPlugin = require("compression-webpack-plugin");
//監控日誌
const SentryCliPlugin = require("@sentry/webpack-plugin");
// 代碼壓縮
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const Version = new Date().getTime();
function resolve(dir) {
  return path.join(__dirname, dir);
}
const cdn = {
  js: [
    // vue必須在第一個
    "https://cdn.bootcss.com/vue/2.6.10/vue.min.js",
    "https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js",
    "https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js",
    "https://cdn.bootcss.com/axios/0.18.1/axios.min.js",
    "https://cdn.bootcss.com/qs/6.5.1/qs.min.js",
    "https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js",
  ],
};
module.exports = {
  publicPath: "./", // 部署應用包時的基本 URL
  outputDir: "wx_vue", // 當運行 vue-cli-service build 時生成的生產環境構建文件的目錄
  assetsDir: "./" + Version + "/assets", // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
  lintOnSave: false, // eslint-loader 是否在保存的時候檢查 安裝 @vue/cli-plugin-eslint 有效
  runtimeCompiler: true, // 是否使用包含運行時編譯器的 Vue 構建版本。設置 true 後你就可以在使用 template
  productionSourceMap: false, // 生產環境是否生成 sourceMap 文件 sourceMap 的詳解請看末尾
  filenameHashing: true, // 去掉hash
  //   pages: {
  //     index: {
  //       entry: "src/main.js",
  //       template: "public/index.html",
  //       filename: "index.html",
  //     },
  //   },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      // 爲生產環境修改配置...
      config.mode = "production";
      config.devtool = "source-map";
    } else {
      // 爲開發環境修改配置...
      config.mode = "development";
    }
    // 刪除懶加載模塊的 prefetch preload，降低帶寬壓力(使用在移動端)
    config.plugins.delete("prefetch").delete("preload");
    config.optimization.minimize(true);
    // gzip壓縮
    // config
    //   .plugin("compressionPlugin")
    //   .use(CompressionPlugin)
    //   .tap(() => [
    //     {
    //       filename: "[path].gz[query]",
    //       algorithm: "gzip",
    //       test: /\.js$|\.html$|\.css/, //匹配文件名
    //       threshold: 10240, //超過10k進行壓縮
    //       minRatio: 0.8, // 只有壓縮率小於這個值的資源纔會被處理
    //       deleteOriginalAssets: false, //是否刪除源文件
    //     },
    //   ]);
    config.plugins.push(
      new CompressionPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.js$|\.html$|\.css/,
        threshold: 10240, // 只有大小大於該值的資源會被處理 10240
        minRatio: 0.8, // 只有壓縮率小於這個值的資源纔會被處理
        deleteOriginalAssets: false, // 刪除原文件
      })
    );
    // 公共代碼抽離
    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",
          },
        },
      },
    };
  },
  configureWebpack: {
    resolve: {
      alias: {
        vue$: "vue/dist/vue.esm.js",
        "@": resolve("src"),
        "@c": path.resolve(__dirname, "./src/components"),
        assets: path.resolve(__dirname, "../src/assets"),
      },
    },
    externals: {
      vue: "Vue",
      vuex: "Vuex",
      "vue-router": "VueRouter",
      axios: "axios",
      qs: "Qs",
      vant: "Vant",
      //   "weixin-js-sdk": "weixin-js-sdk",
      //   clipboard: "clipboard",
      //   qrcodejs2: "qrcodejs2",
      //   "js-md5": "js-md5",
    },
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              // 刪除註釋
              comments: false,
            },
            // 生產環境自動刪除console
            compress: {
              // warnings: false, // 若打包錯誤，則註釋這行
              drop_debugger: true, // 清除 debugger 語句
              drop_console: true, // 清除console語句
              pure_funcs: ["console.log"],
            },
          },
          sourceMap: false,
          parallel: true,
        }),
      ],
    },
  },

  // css相關配置
  css: {
    extract: false,
    loaderOptions: {
      stylus: {
        "resolve url": true,
        import: [],
      },
      //   less: {
      //     // `globalVars` 定義全局對象，可加入全局變量
      //     globalVars: {
      //       primary: "#333",
      //     },
      //   },
    },
    requireModuleExtension: true,
  },

  // webpack-dev-server 相關配置
  devServer: {
    // 設置代理
    hot: true, // 熱加載
    host: "localhost", // ip地址
    port: 8080, // 端口
    https: false, // false關閉https，true爲開啓
    open: true, // 自動打開瀏覽器
    proxy: {
      // 配置多個跨域
      "/api": {
        // 本地
        target: "https://yishanol.cn/ysol_wx",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },

  pluginOptions: {
    // 第三方插件配置
    // ...
  },
  chainWebpack: (config) => {
    // ============壓縮圖片 start============
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        // { bypassOnDebug: true }
        mozjpeg: { progressive: true, quality: 65 }, // Compress JPEG images
        optipng: { enabled: false }, // Compress PNG images
        pngquant: { quality: [0.65, 0.9], speed: 4 }, // Compress PNG images
        gifsicle: { interlaced: false }, // Compress SVG images
        // webp: { quality: 75 },
      })
      .end();
    // config.module.rules.push({
    //   test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    //   use: [
    //     {
    //       loader: "image-webpack-loader",
    //       options: { bypassOnDebug: true },
    //     },
    //   ],
    // });
    // ============壓縮圖片 end============
    config.plugin("html").tap((args) => {
      args[0].cdn = cdn;
      return args;
    });
    // 添加分析工具
    if (process.env.NODE_ENV === "production") {
      if (process.env.npm_config_report) {
        config
          .plugin("webpack-bundle-analyzer")
          .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin)
          .end();
        config.plugins.delete("prefetch");
      }
    }

    if (process.env.UMI_ENV === "production") {
      // 當爲 prod 時候才進行 sourcemap 的上傳，如果不判斷，在項目運行的打包也會上傳 這個爲線上日誌輸出 不需要的可以刪除掉
      config.plugin("sentry").use(SentryCliPlugin, [
        {
          ignore: ["node_modules"],
          include: /\.map$/, // 上傳dist文件的js
          configFile: "sentry.properties", // 配置文件地址，這個一定要有，踩坑在這裏，忘了寫導致一直無法實現上傳sourcemap
          release: "[email protected]", // 版本號，自己定義的變量，整個版本號在項目裏面一定要對應
          deleteAfterCompile: true,
          urlPrefix: "~/wx_vue/", // cdn js的代碼路徑前綴
        },
      ]);
    }
  },
};

原文鏈接：vue.config.js打包優化(有效)