Ant-design-vue 优化icons 包体积

之前antd-vue 引入了全量icons, 优化没成功，可能是版本问题，记录下，需要创建一个文件导出对应使用的icon，然后在webpack配置里面加个alias，体积较小200多K。

antd-icons.js：需要注意不同的类型图标目录和名称不一样哈，fill outline……，有些组件自带图标的也需要引入，比如message的成功失败告警灯图标，可以看node_modules里面查看具体导出的模块名称，查看未知图标，页面审查看class名称

javascript

export { default as PaperClipOutline } from "@ant-design/icons/lib/outline/PaperClipOutline";
export { default as DeleteOutline } from "@ant-design/icons/lib/outline/DeleteOutline";

export { default as CheckCircleFill } from "@ant-design/icons/lib/fill/CheckCircleFill";
export { default as InfoCircleFill } from "@ant-design/icons/lib/fill/InfoCircleFill";
export { default as ExclamationCircleFill } from "@ant-design/icons/lib/fill/ExclamationCircleFill";
export { default as CloseCircleFill } from "@ant-design/icons/lib/fill/CloseCircleFill";export { default as PaperClipOutline } from "@ant-design/icons/lib/outline/PaperClipOutline";
export { default as DeleteOutline } from "@ant-design/icons/lib/outline/DeleteOutline";

export { default as CheckCircleFill } from "@ant-design/icons/lib/fill/CheckCircleFill";
export { default as InfoCircleFill } from "@ant-design/icons/lib/fill/InfoCircleFill";
export { default as ExclamationCircleFill } from "@ant-design/icons/lib/fill/ExclamationCircleFill";
export { default as CloseCircleFill } from "@ant-design/icons/lib/fill/CloseCircleFill";

vue.config.js 配置片段，文章末尾是全部配置：

javascript

alias: {
        "@ant-design/icons/lib/dist$": resolve("./src/util/antd-icons.js"), //解决官方包icons 全量引入
},

开发环境：

╰─$ node -v

v14.16.0

╰─$ npm -v

6.14.11

脚手架：@vue/cli 4.5.11

ant-design-vue 版本

╰─$ yarn list | grep ant

├─ @ant-design/colors@3.2.2

├─ @ant-design/icons-vue@2.0.0

│ ├─ @ant-design/colors@^3.1.0

├─ @ant-design/icons@2.1.1

├─ ant-design-vue@1.7.4

│ ├─ @ant-design/icons-vue@^2.0.0

│ ├─ @ant-design/icons@^2.1.1

│ ├─ http-cache-semantics@3.8.1

javascript

//https://cli.vuejs.org/zh/config/
const resolve = (dir) => require("path").join(__dirname, dir);
const CompressionWebpackPlugin = require("compression-webpack-plugin"); //版本5.0.1 下面写法高版本不支持
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg|png)(\?.*)?$/i;
const webpack = require("webpack");

module.exports = {
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to '/my-app/'
  publicPath: "/judge-app/",

  // where to output built files
  outputDir: "judge-build", //"dist", //
  lintOnSave: "warning",
  productionSourceMap: false,
  configureWebpack: {
    plugins: [
      new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/), //减小moment语言包体积
    ],
    resolve: {
      alias: {
        "@ant-design/icons/lib/dist$": resolve("./src/util/antd-icons.js"), //解决官方包icons 全量引入
      },
    },
  },
  chainWebpack: (config) => {
    // config.resolve.alias.set("_css_", resolve("src/assets/css")); //test 设置别名

    config.plugin("html").tap((args) => {
      args[0].title = "NTI - 威胁研判平台";
      return args;
    });
    // 开发环境不需要gzip 等
    if (process.env.NODE_ENV === "production") {
      config.plugin("CompressionWebpackPlugin").use(
        new CompressionWebpackPlugin({
          // filename: '[path].gz[query]',
          algorithm: "gzip",
          test: productionGzipExtensions,
          threshold: 1024,
          // minRatio: 0.8,
          // deleteOriginalAssets: true  //需要保留原文件
        })
      );
      config.module
        .rule("images")
        .test(/\.(png|jpe?g|gif)(\?.*)?$/) //TODO： svg 有点问题
        .use("image-webpack-loader")
        .loader("image-webpack-loader")
        .options({
          bypassOnDebug: true,
        })
        .end();
    }
  },
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      //   sass: {
      //     // @/ 是 src/ 的别名
      //     // 所以这里假设你有 `src/variables.sass` 这个文件
      //     data: `@import "~@/variables.sass"`
      //   },
      //   // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      //   // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      //   // 但是在配置 `data` 选项的时候
      //   // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      //   // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      //   scss: {
      //     data: `@import "~@/variables.scss";`
      //   },
      //   // 给 less-loader 传递 Less.js 相关选项
      less: {
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          hack: `true; @import '~@/assets/css/var.less';`,
        },
        modifyVars: {
          // hack: `true; @import '~@/assets/css/var.less';`,
          // "primary-color": "#55A722",
          // "success-color": "#68B92E",
          // "warning-color": "#F59F00",
          // "error-color": "#F52222",
          // "info-color": "#0A88FF",
          // "primary-5": "#68B92E",
          // "item-active-bg": "rgba(85,167,34,.10)", //覆盖计算的primary-color值
          // "item-hover-bg": "rgba(85,167,34,.10)",
          // "table-row-hover-bg": "rgba(85,167,34,.10)",
          // "link-color": "#0072ee",
          // "link-hover-color": "#0A88FF",
          // "link-active-color": "#0056FF",
          // "btn-danger-color": "#fff",
          // "btn-danger-bg": "#ff524d", // color(~`colorPalette('"{error-color}', 5) `)
          // "btn-danger-border": "#ff524d", // color(~`colorPalette('"{error-color}', 5) `)
          // "layout-header-background": "#26303A", //导航颜色
          // "table-header-bg": "#F5F5F5",
          // // "card-actions-background"   : "#F7F9FA",
          // "modal-mask-bg": "rgba(0, 0, 0, 0.45)",
          // "font-family":
          //   "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', 'Helvetica Neue',Helvetica, Arial, sans-serif,  'Segoe UI Symbol'",
        },
        javascriptEnabled: true,
      },
    },
  },
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: 3666, //前端开发启动的端口
    https: false,
    hotOnly: false,
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
    proxy: {
      "/api": {
        target: "http://10.24.20.27:8003", //"http://10.24.20.32:8004", //"http://10.24.20.27:8004", //后台API地址

        changeOrigin: true,
      },
    }, // string | Object
    before: (app) => {},
  },
};

Ant-design-vue 优化icons 包体积 ​

开发环境： ​

脚手架：@vue/cli 4.5.11 ​

ant-design-vue 版本 ​

Ant-design-vue 优化icons 包体积

开发环境：

脚手架：@vue/cli 4.5.11

ant-design-vue 版本