zoukankan      html  css  js  c++  java
  • ant design vue按需导入icons

    由于最近项目上线首页加载问题,从各方面进行优化减少体积,包括icon的按需导入,借此记录一下

    1.首先需要创建一个icon.js,我是直接在src的utils中创建的(可以根据自己需要,在对应路径创建)

    icon.js

    ......
    // 此处写你项目所需图标名称,一般fill对应的是你所用其他控件内置的图标如日历,outline一般对应你a-icon对应的图标,不过不能一概而论,具体还是得根据实际情况
    export { default as InfoCircleOutline } from '@ant-design/icons/lib/outline/InfoCircleOutline'
    export { default as InfoCircleFill } from '@ant-design/icons/lib/fill/InfoCircleFill'
    .......
    // 最后留一行换行,好像说是如果不留会影响编译之类(ps:此操作借鉴其他博客,当然也可以不留一行尝试一下编译)
    

    2.然后在vue.config.js中配置,此处是vue-cli3的,所以在这里配置,不同版本的得在对应的webpack配置文件里配置

    vue.config.js

    ......
    configureWebpack: {
        resolve: {
              alias: {
                '@ant-design/icons/lib/dist$': path.resolve(__dirname,'./src/utils/icon.js')  // 自建的文件的相对路径
              }
        }
    }
    ......
    

    至此,icon按需导入已完成,如果有什么问题,欢迎留言讨论,共同学习

  • 相关阅读:
    Android使用静默安装时碰见的问题
    Android 在Android代码中执行命令行
    android SystemServer.java启动的服务。
    Android AndroidRuntime类
    学习C的笔记
    Java虚拟机 JVM
    Android 关于ijkplayer
    Android 算法 关于递归和二分法的小算法
    Android 死锁和重入锁
    JAVA的内存模型(变量的同步)
  • 原文地址:https://www.cnblogs.com/AdolphWilliam/p/14384214.html
Copyright © 2011-2022 走看看