首页
学习
活动
专区
工具
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 框架的项目教程时,遇到了报错

    61920

    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

    【实战】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

    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

    50810

    类型即正义: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 好像不支持这样写,会报错。

    14.3K31

    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

    使用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

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

    今天大师兄要分享的是一套开箱即用的前端解决方案: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
    领券