首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Ant Design Pro中启用代码拆分?

在Ant Design Pro中启用代码拆分可以通过以下步骤实现:

  1. 确保你的项目使用了Ant Design Pro脚手架创建,并且已经安装了最新版本的Ant Design Pro。
  2. 打开项目的配置文件config/config.js
  3. 在配置文件中找到disableDynamicImport选项,并将其设置为false。这将启用代码拆分功能。
  4. 确保你的路由配置文件config/router.config.js中的每个路由都使用了component属性来指定对应的组件。
  5. 在使用component属性指定组件时,可以使用动态导入的方式,例如:
代码语言:txt
复制
component: () => import('../path/to/YourComponent'),
  1. 保存配置文件并重新启动项目。

启用代码拆分后,Ant Design Pro将会根据路由配置自动将项目代码拆分为多个异步加载的模块,从而提高页面加载速度和性能。

Ant Design Pro相关产品和介绍链接:

  • 腾讯云函数计算(Serverless):腾讯云函数计算是一种事件驱动的无服务器计算服务,支持在云端运行代码而无需管理服务器。它可以与Ant Design Pro结合使用,实现更高效的前端开发和部署。了解更多:腾讯云函数计算
  • 腾讯云容器服务(TKE):腾讯云容器服务是一种高度可扩展的容器管理服务,支持在云端部署和管理容器化的应用程序。它可以与Ant Design Pro结合使用,实现更灵活的应用部署和管理。了解更多:腾讯云容器服务
  • 腾讯云CDN加速:腾讯云CDN加速是一种全球分布式的内容分发网络,可以加速静态资源的传输和分发,提高网站的访问速度和用户体验。它可以与Ant Design Pro结合使用,优化前端资源加载性能。了解更多:腾讯云CDN加速
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端UI框架Ant Design Pro

Ant Design Pro目前蚂蚁金服和阿里巴巴内部上百个项目正在尝试 Pro 的研发模式 1.安装node和git 2.从 GitHub 仓库中直接安装最新的脚手架代码。...Ant Design Pro 的布局 在 Ant Design Pro ,我们抽离了使用过程的通用布局,都放在 layouts 目录,分别为: BasicLayout:基础页面布局,包含了头部导航...如何使用 Ant Design Pro 布局# 通常布局是和路由系统紧密结合的,Ant Design Pro 的路由使用了 Umi 的路由方案,为了统一方便的管理路由和页面的关系,我们将配置信息统一抽离到.../Dashboard/Workplace' }, ], }, ], }] 映射路由和页面布局(组件)的关系代码所示,完整映射转换实现可以参看 router.config.js。...Ant Design 布局组件# 除了 Pro 里的内建布局以为,在一些页面需要进行布局,可以使用 Ant Design 目前提供的两套布局组件工具:Layout 和 Grid。

3.5K20
  • 我用了多年的前端框架,强烈推荐!

    大家好,我是鱼皮,今天给大家分享一个我自己用了多年、现在团队也在用的前端框架 —— Ant Design Pro。 什么是 Ant Design Pro?...Ant Design Pro 是由蚂蚁金服开发的、基于 Ant Design 组件库的开发框架,专门用于构建企业级管理后台和前端应用。...img 除了 Ant Design Pro 外,我们最好再了解一下 Ant Design 相关的技术生态,比如: 1)Ant Design:一套企业级 UI 设计语言和组件库。...为什么用 Ant Design Pro? 从定位上来说,Ant Design Pro 是一个开箱即用的后台前端开发框架,能够帮助我们快速开发大多数网站(尤其是管理系统)。...,选择 simple 即可 边读文档边实践,多尝试修改代码并查看效果,更容易理解 Ant Design Pro 框架的功能 img 如果你学习使用 Ant Design Pro 框架的项目教程时,遇到了报错

    62420

    【实战】1096- React 后台系统多页签实现

    社区上关于多页签的需求呼声也非常高,但是 React 社区比较出名的后台方案 Ant Design Pro 也不支持该功能,两年没看,至今仍然有很多 Issue 提出这类需求: Antd Pro...社区多页签需求 Issues 偏右大佬早在 2017 年对此做出了回应,详见“能否提供tab切换模式 · Issue #220 · ant-design/ant-design-pro · GitHub”...(232 star,基于Ant Design Pro 2.0 的多标签页tabs) Ant Design Pro Plus ( 88 star,基于 ant-design-pro 做一些微小的工作)...React Admin (83 star,基于 Ant Design React 的管理系统架构) ant_pro_tabs (82 star,基于 Ant Design Pro 4 实现多标签页面,包括...:路由联动,列表,多详情页共存,自动新增、关闭标签等功能) Antd Pro Page Tabs ( 54 star,Ant Design Pro 多页签,基于 UmiJS ) alita/packages

    2.5K10

    React 后台系统多页签实现

    社区上关于多页签的需求呼声也非常高,但是 React 社区比较出名的后台方案 Ant Design Pro 也不支持该功能,两年没看,至今仍然有很多 Issue 提出这类需求: Antd Pro...社区多页签需求 Issues 偏右大佬早在 2017 年对此做出了回应,详见“能否提供tab切换模式 · Issue #220 · ant-design/ant-design-pro · GitHub”...(232 star,基于Ant Design Pro 2.0 的多标签页tabs) Ant Design Pro Plus ( 88 star,基于 ant-design-pro 做一些微小的工作)...React Admin (83 star,基于 Ant Design React 的管理系统架构) ant_pro_tabs (82 star,基于 Ant Design Pro 4 实现多标签页面,包括...:路由联动,列表,多详情页共存,自动新增、关闭标签等功能) Antd Pro Page Tabs ( 54 star,Ant Design Pro 多页签,基于 UmiJS ) alita/packages

    3.4K20

    类型即正义:TypeScript 从入门到实践(序章)

    TypeScript 版本的 React 项目代码的过程,在下一个小节我们将会结合 React 项目代码,真正开始 TypeScript 语法的讲解。...在这篇教程的讲解过程,我们将通过 Ant Design[17] 对应的 React 组件库 antd[18] 来辅助我们项目的编写,使得我们可以专注于讲解 TS 的核心知识,而不被繁杂的界面语言所干扰...Mobile[21] 开箱即用的台前端/设计解决方案:Ant Design Pro[22] 插画设计:海兔[23] 一款为设计者提升工作效率的 Sketch 工具集 :Kitchen[24] 后面图雀社区计划围绕...最后我们安装一个在 Ant Design 4.0 拆分出去的 icons 包,可以用来按需引用 icons,进一步减少最后的打包体积,继续在命令行运行如下命令: $ npm install @ant-design.../index-cn [22] Ant Design Pro: https://pro.ant.design/index-cn [23] 海兔: https://ant.design/docs/spec/

    1.5K20

    Uni&antd的ProLayout布局动态菜单实现及踩坑记录

    ProLayout 高级布局是 Ant Design Pro 的一个组件,可以提供一个标准又不失灵活的后台标准布局,同时提供一键切换布局形态,自动生成菜单等功能。...使用 umirc.ts 直接配置路由和 layout : layout: {   name: 'Ant Design',   locale: true,   layout: 'side', }, 这样是可以正常显示了.../pro-layout'; import ProLayout, { PageContainer, MenuDataItem } from '@ant-design/pro-layout'; import...在 props 可以取到 umirc.ts 配置的信息,直接拿到 routes 。 这里的图标如果直接取官方的 type ( HomeFilled )是不行的。...因为这里的 icon 需要是 ReactNode 的形式( ),但是 umirc.ts 好像不支持这样写,会报错。

    3.8K20

    Uni&antd的ProLayout布局动态菜单实现及踩坑记录

    ProLayout 高级布局是 Ant Design Pro 的一个组件,可以提供一个标准又不失灵活的后台标准布局,同时提供一键切换布局形态,自动生成菜单等功能。...使用 umirc.ts 直接配置路由和 layout : layout: {   name: 'Ant Design',   locale: true,   layout: 'side', }, 这样是可以正常显示了.../pro-layout'; import ProLayout, { PageContainer, MenuDataItem } from '@ant-design/pro-layout'; import...在 props 可以取到 umirc.ts 配置的信息,直接拿到 routes 。 这里的图标如果直接取官方的 type ( HomeFilled )是不行的。...因为这里的 icon 需要是 ReactNode 的形式( ),但是 umirc.ts 好像不支持这样写,会报错。

    14.3K31

    Ant Design学习(六)

    3、Ant Design Pro入门 3.1、了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级后台前端/设计解决方案。...效果: 源码地址:https://github.com/ant-design/ant-design-pro 特性: 3.2、快速入门 3.2.1、部署安装 下载地址:https://github.com.../ant-design/ant-design-pro 我们使用资料中提供的,已经下载好的文件:ant-design-pro-master.zip 第一步:将ant-design-pro-master.zip...解压到任意目录,我的目录是F:\code Ant Design Pro提供的目录如下: ├── config # umi 配置,包含路由,构建等配置 ├── mock # 本地模拟数据 ├── public...global.less # 全局样式 │ └── global.js # 全局 JS ├── tests # 测试工具 ├── README.md └── package.json 第二步,导入项目到Idea

    50910

    开箱即用的台前端解决方案

    今天大师兄要分享的是一套开箱即用的前端解决方案:Ant Design Pro 简介 Ant Design Pro 是基于 Ant Design 和 umi 封装的一整套企业级后台前端/设计解决方案。...Ant Design Pro 力求提供开箱即用的开发体验,为此提供完整的脚手架,涉及国际化,权限,mock,数据流,网络请求等各个方面。它为后台中常见的方案提供了最佳实践,从而减少学习和开发成本。...使用 node scripts 的构建命令即可完成构建。 体验和建议 Ant Design Pro 自带多场景的最佳实践方案,启动即完成了项目的整体架构。同时,它内置了模板组件,让开发更加高效。...它可以无缝对接 Ant Design, 让开发者有更多的组件可以选择或重组。 关于 Ant Design Pro 的介绍就到这里了。...想要了解更多内容,请查阅下方的官方地址 Ant Design Pro地址 https://pro.ant.design/zh-CN/ 写在最后 欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点

    94330

    使用umi脚手架 创建项目 详细教程

    创建项目有两种形式, 一种是是命令行 一种是使用GUI 首先介绍命令行创建项目 执行以下命令开始创建项目 npm creat umi 可以选择以下几个项目 project,通用项目脚手架,支持选择是否启用...TypeScript,以及 umi-plugin-react 包含的功能 ant-design-pro,仅包含 ant-design-pro 布局的脚手架,具体页面可通过 umi block 添加 block...选择目录并新建项目名称 -> 点击完成 脚手架会自动安装,更新,初始化项目, 安装依赖.到最后的项目创建成功 这里可以看到项目的配置, 以及一些任务,可以直接在页面开启项目, 也可以直接将一些Ant...Design 的资源添加到项目中 在创建项目时, 有很多选项, 是否使用dva, antd, 国际化, ts, 热加载,mock, dll, 如果一开始不确定使用建议选择最简单的方式创建项目.

    2.4K10
    领券