Ant Design Vue icon 打包优化(附组件所需 icon )

最新推荐文章于 2024-04-28 05:16:32 发布

原创

最新推荐文章于 2024-04-28 05:16:32 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

补充

Antd Vue 2.x 版本后 icon 需要额外npm 引入，应该是解决了需要手动按需引入的问题，可以尝试升级版本

正文

最近在尝试对项目进行优化，在网上看到了对 antd 库中 icon 文件的优化方法，核心思想是通过 webpack alias 手动指定用到按需引入的 icon 文件。

// wepack.config.js
module.exports = {
   
   
    resolve: {
   
   
      alias: {
   
   
        "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
      }
    }
};

// icons.js
export {
   
   
  default as HomeOutline
} from '@ant-design/icons/lib/outline/HomeOutline'
export {
   
   
  default as SlidersOutline
} from '@ant-design/icons/lib/outline/SlidersOutline'
export {
   
   
  default as TransactionOutline
} from '@ant-design/icons/lib/outline/TransactionOutline'

试验过后发现 antdv 中一些组件的 icon 也不显示了，显然是因为 icons.js 中没有导入所需的 icon
因此自己整理了一份组件所需 icon。

/**@ant-design-vue */
/** version 1.6.3*/
// alert form progress 
export {
   
    default as CheckCircleFill } from '@ant-design/icons/lib/fill/CheckCircleFill';
// alert form modal progress result
export {
   
    default as CheckCircleOutline } from '@ant-design/icons/lib/outline/CheckCircleOutline';
// alert 
export {
   
    default as InfoCircleFill } from '@ant-design/icons/lib/fill/InfoCircleFill';
// alert modal
export {
   
    default as InfoCircleOutline } from '@ant-design/icons/lib/outline/InfoCircleOutline';
<