Ant-Design-Vue 瘦身

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.3k累计阅读 1.3k平均单平台已同步平台 CSDN 微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄5年

关注

VIP免费原创最新推荐文章于 2026-09-13 20:47:15 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

前言

本文仅适用于Vue-cli@3
在Vue项目中使用Antd时，会引入所有组件、图标、包括一些依赖库，体积庞大对前端性能有一定影响

1.缩减moment

修改 webpack.prod.conf.js ，增加以下代码过滤掉除zh-cn以外的语言包

plugins: [
  new webpack.ContextReplacementPlugin(/moment[/\\]locale$/,/zh-cn/),
]

2.按需引入图标

修改 webpack.base.conf.js ，增加以下代码，将antd引用图标指向./src/assets/js/antd-icons.js 中，需要哪些图标就在antd-icons.js中导出

resolve: {
  alias: {
    '@ant-design/icons/lib/dist$': resolve("./src/assets/js/antd-icons.js")
  }
}

antd-icons.js 代码

// 图标分为 filled outline twotone ,可以前往@ant-design/icons/lib中查看

// 例：导出图标 <a-icon

最低0.47元/天解锁文章

收录于

当前文章被以下社区和专栏收录：

标签

#vue.js #webpack

如何在 Vue 3 中使用 Ant Design Ant Design 是一个开源库，可让您创建吸引人的响应式网站。如果您想使用经过充分测试且易于学习的框架，那么它是您下一个项目的绝佳选择。另一方面，Vue.js 是一个用于创建用户界面的渐进式框架。它旨在易于学习，同时具有灵活性和可定制性。将这两者结合使用可以让您比以往更快地创建响应式网站。Ant Design 和 Vue 3 中包含的 Composition API 使得在编写有限代码的同时创建美观、响应迅速且可扩展的应用程序变得简单。阅读详情

相关推荐

从“救火队员”到“架构师”：我是如何通过SLA思维重构老旧单体服务稳定性的

本文分享了如何通过SLA思维重构老旧单体服务稳定性的实战经验。从建立核心SLI监控体系、基于SLO设计精准告警，到实施熔断与降级策略，最终实现系统稳定性质的飞跃。文章详细介绍了SLA、SLI、SLO在架构优化中的关键作用，为技术团队提供可复用的稳定性提升方案。

weixin_38169886的博客 1290

安装指定版本的ant-design-vue和指定版本的@ant-design/icons-vue 图标组件包

gurenchang的博客 4234

控制台开发：基于 React/Vue 构建高颜值的指纹浏览器可视化管理台

指纹浏览器控制台的用户体验成为商业成败关键。传统后台管理系统在指纹浏览器场景下存在三大致命缺陷：状态反馈延迟、数据分页割裂、视觉设计过时。解决方案包括：采用WebSocket实现实时数据同步，虚拟滚动与增量更新优化性能，乐观更新机制提升操作流畅度。视觉设计需以深色模式为基础，通过卡片式布局、数据可视化（如环形进度条、网络波形图、3D地球视图）增强科技感。高性能实例卡片组件需结合React/Vue优化技术（如memo、自定义渲染逻辑）确保流畅交互。最终目标是将控制台打造成兼具工业级稳定性与视觉冲击力的数字作战

数据知道的博客 189

ant-design-vue按需引入icon以及组件

大家好，我是Counterrr。不忘初心，砥砺前行。共勉。

你华还是你华 2万+

vue3 全局注册 ant 图标组件

Ant Design Vue官网中，给出的示例中，引用图标组件，需要在每个页面进行按需引入。下面给大家提供一个全局注册ant图标组件的一种方法。 1.安装 @ant-design/icons-vue 图标组件包 npm install --save @ant-design/icons-vue 2.在main.js / main.ts进行注册引入 import * as Icons from '@ant-design/icons-vue' import router from './router' im.

圆圈圈的博客 1万+

动态引入 antDesign 的图标，并注册为组件

【代码】动态引入 antDesign 的图标，并注册为组件。

pig_ning的博客 2962

Agent-Skills-for-Context-Engineering 的研究运行系统：基于状态机的 research-to-skill 流水线与文件型运行工件

本文深入解析 [researcher/runs/README.md](https://link.gitcode.com/i/82b6af298abf117d2fb90e726e2f36dc) 所定义的研究运行（run）机制：一次运行是 research-to-skill 状态机的完整"行程"，以文件系统上的持久化工件承载从候选源发现、证据检索、源评估、技能提案、新颖性检查、就绪校验到关闭归档的全生

gitblog_00705的博客 291

5步掌握Ant Design Vue Pro企业级项目部署：从开发到上线的完整指南

你是否曾面对企业级Vue项目部署时感到困惑？从开发环境配置到生产环境优化，再到服务器部署和性能调优，每个环节都充满挑战。今天，我们就来聊聊如何像专业人士一样部署Ant Design Vue Pro项目，让你轻松应对各种部署场景，快速搭建稳定高效的企业应用。 ## 💡 为什么选择Ant Design Vue Pro？ Ant Design Vue Pro是基于Vue 2的企业级中后台前端解决方

gitblog_00147的博客 857

从开发到上线：Ant Design Vue Pro全环境部署指南

你是否曾在部署Ant Design Vue Pro项目时遇到过环境配置混乱、服务器兼容性问题或构建优化难题？本文将系统讲解从开发环境到生产环境的完整部署流程，包含Nginx配置、Docker容器化、CDN加速等实用方案，帮助你快速解决90%的部署痛点。 ## 项目准备与构建 ### 环境要求 Ant Design Vue Pro基于Vue 2构建，需确保开发环境满足以下条件： - Node.j

gitblog_00707的博客 460

基于Ant Design Vue与Element Plus的智能图片上传组件实现指南

在前端开发中，图片上传是Web应用的核心功能之一，其性能直接影响用户体验和服务器负载。其基本原理是通过浏览器API获取用户选择的图片文件，并将其传输至服务器。为了提升技术价值，开发者通常需要在前端对图片进行预处理，以优化加载速度、节省带宽并适配业务场景。这自然引入了图片压缩与裁剪技术。图片压缩通过算法减少文件体积，而裁剪则用于调整构图与尺寸。结合Vue.js生态中流行的UI框架，如Ant Design Vue和Element Plus，可以高效封装出支持这些功能的智能上传组件。这种组件在前端完成图片的“瘦身

weixin_30787531的博客 537

『踩坑记录』解决Nuxt.js 打包后 Ant Design 的 dist.js 图标文件过大的问题

解决Nuxt.js 打包后 Ant Design 的 dist.js 图标文件过大的问题

u013588234的博客 1049

Vue项目打包体积优化实战：从3.2MB到380KB的性能瘦身指南

在现代前端工程化实践中，Webpack打包优化是提升应用性能的核心环节。其原理在于通过静态分析、代码分割和依赖管理，剔除未使用代码并优化资源加载。这项技术的价值在于能显著减少应用体积，从而缩短首屏加载时间，提升用户体验与业务转化率。尤其在Vue.js等单页应用（SPA）中，庞大的vendor.js文件常成为性能瓶颈，影响后台管理系统等企业级应用的流畅度。针对此问题，开发者需掌握依赖分析与精准瘦身的方法。例如，通过webpack-bundle-analyzer进行可视化诊断，能快速定位如Element UI、

weixin_30421809的博客 398

Vue项目性能优化实战：从构建瘦身到运行时流畅的完整指南

在现代前端开发中，性能优化是提升用户体验和项目可维护性的关键环节。其核心原理在于通过减少资源体积、优化加载策略和提升代码执行效率，来缩短页面加载时间并增强交互响应。对于Vue.js这类声明式框架，优化技术价值尤为显著，能有效避免因组件滥用和状态管理不当导致的性能债务。常见的应用场景包括大型单页应用的首屏加速、长列表流畅渲染以及复杂交互的即时反馈。本文聚焦于Vue项目的高频优化实践，详细探讨了如何利用webpack-bundle-analyzer进行依赖分析与打包体积可视化，以及通过路由懒加载实现代码分割，从

weixin_33895657的博客 425

Vue 3状态管理选型指南：Pinia vs Vuex实战决策逻辑

状态管理是前端工程化的核心能力，尤其在Vue 3应用中，它直接决定响应式数据流的可维护性、TypeScript类型安全性和跨组件协作效率。其底层原理基于依赖追踪与响应式代理机制，技术价值体现在降低调试成本、提升团队协作确定性及支撑SSR/微前端等复杂架构。典型应用场景包括电商后台的多模块状态隔离、SaaS系统的权限与配置联动、IoT控制台的实时设备状态同步等。当项目涉及Vue 3、TypeScript深度集成或生产级调试需求时，Pinia凭借defineStore的类型推导优势和Vue Devtools原生

weixin_30411239的博客 374

Vue打包优化的详细说明（包括nginx的配置）

ss 目录 1、分析工具 2、配置方法分析工具 Coverage：查看代码的使用状况 Coverage 是chrome开发者工具的一个新功能，从字面意思上可以知道它是可以用来检测代码在网站运行时有哪些js和css是已经在运行，而哪些js和css是还没有用到的，如图，这是我在打开csdn网页时，所显示的已运行和尚未运行的代码情况。那这个新功能有什么作用呢？如上图所示，最右边显示的是我们加载的css和js文件数量，红色区域表示已运行的代码，而青色表示已加载但未运行的代码。可用来发现页面中尚未

zhy810302的专栏 669

UniApp项目构建优化：vue.config.js配置与Webpack实战指南

在现代前端工程化体系中，构建工具是连接开发与部署的关键桥梁，其核心作用在于优化代码打包、提升开发效率和保障应用性能。Webpack作为主流构建工具，通过模块化打包机制，将源代码转换为浏览器可识别的静态资源。理解其配置原理，能够帮助开发者实现代码分割、资源压缩、缓存优化等关键技术，从而显著提升应用加载速度与运行效率。在跨端开发框架UniApp中，vue.config.js文件正是Webpack配置的入口，它允许开发者深度定制构建流程，解决多平台兼容性、打包体积过大、热更新缓慢等常见工程问题。通过合理配置pub

weixin_30425949的博客 424

推荐一款牛逼的接私活项目，微服务也能搞定！

各位粉丝朋友，今天给大家分享一款接私活神器！微服务开发平台采用前后端分离的模式，前端开源两个框架：Sword (基于 React、Ant Design)、Saber (基于 Vue、Ele...

WantFlyDaCheng的博客 232

C/S与B/S架构深度解析：从原理到实战选型指南

在软件工程领域，系统架构是构建可靠、可扩展应用的基石。客户端/服务器（C/S）架构与浏览器/服务器（B/S）架构作为两种最经典的模式，其核心差异在于计算任务的分布与部署方式。C/S架构将部分业务逻辑与界面处理置于客户端，能充分利用本地计算资源，适合对性能、安全性和交互体验有极致要求的场景，如专业图形软件与高频交易系统。B/S架构则将所有业务逻辑集中于服务器，客户端简化为浏览器，实现了'一次编写，随处运行'，极大地降低了部署与跨平台成本，成为电子商务、在线办公等互联网产品的标准选择。随着技术演进，现代Web技

weixin_34265814的博客 535

25套大屏可视化模板的实战解构：数据契约、性能与适配逻辑

大数据可视化大屏不是简单套用图表库，而是数据、视觉、交互与性能四维耦合的系统工程。其核心在于建立稳定的数据契约——字段名、单位、时间格式与空值规则必须严格对齐，否则将导致‘120%完成率’等业务误读；同时需突破渲染瓶颈，原生JS方案常比Vue/React模板快3倍，关键在规避虚拟DOM冗余比对与框架调试开销；响应式也不止于媒体查询，而需结合devicePixelRatio动态加载高清资源。这些能力直接支撑交通调度、零售作战室、医疗分诊等高要求场景。本文基于25套真实交付模板，深度拆解从数据接入到4K大屏落地

weixin_29067143的博客 270

上一篇：手动实现JavaScript模板字符串

下一篇： WinForm列表控件开启双缓冲

从“救火队员”到“架构师”：我是如何通过SLA思维重构老旧单体服务稳定性的

weixin_38169886的博客

04-19

1290