记解决 `antd is not defined` 解决ant design 打包体积过大的问题

最新推荐文章于 2021-12-13 18:24:01 发布
最新推荐文章于 2021-12-13 18:24:01 发布
阅读量433 收藏
点赞数
文章标签： \N
原文链接：https://www.codeprj.com/blog/b169a41.html
版权
本文记录了解决Ant Design在打包时体积过大的问题，包括遇到的'antdisnotdefined'错误及对应的解决方案。通过参考相关文章，对Webpack配置进行调整，实现了对Ant Design库的按需加载，有效减小了应用的打包体积。
摘要由CSDN通过智能技术生成
w36680130
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
优化ant design pro打包之后vendors.async.js文件大的问题
qq_45149366的博客
07-27 2193
项目使用的是ant design pro V2，比较老的版本了，项目部署之后每次首页都加载缓慢，看了下打包后的dist文件夹里，最大的两个文件是vendors.async.js和umi.js。 umi打包的时候会把第三方组件全部打包到vendors.async.js文件中，如果想要减小vendors.async.js文件的大小，就需要分析哪些组件被打包进去了，然后通过拆分去进行优化。这个还没有弄很明白，后来我看了下我的项目用gzip压缩之后就已经小很多了，就只用了gzip，如果后面项目文件多到gzip压缩都
记react ant-design-pro 打包优化
learning_ever的博客
09-14 608
ant-pro打包优化
ant design pro 打包空白_给你代码：ant-desgin-vue使用
weixin_39918690的博客
11-25 585
安装 推荐使用vue-cli安装 npm install -g @vue/cli安装完毕安装ant-designnpm install -g ant-design-vue 然后就可以使用了使用 import 'ant-design-vue/dist/antd.css';import Antd from 'ant-design-vue';Vue.use(Antd); 安装默认如果编译的话(全部引入)...
解决React+Ant Design 打包后vendors.js过大问题
qq_36400206的博客
08-03 6298
解决React+Ant Design 打包后vendors.js过大问题 React项目常用Webpack进行打包，Webpack中有一个功能是Code Spliting，使用该模块可以减少重复引用的模块，就是通过配置将一些公共模块例如react、react-dom打包到vendors.js中，只引用一次。避免了每次不同页面引入的时候，都打包一份相同的代码。但是这样会有一个问题，会导致vendor...
react+antpro 打包后生成大体积文件之优化
woyaoshengzhang的博客
04-09 1985
概述 使用antpro 框架做了一个react 项目，打包后umi.js文件体积差不多有1.4M。后来使用gzip压缩方式，将其压缩到421kb，大大缩短加载时间。 查看项目文件大小 可以通过两种方式，查看具体产生了哪些大文件。 1. 使用开发者工具的Network，可以查看浏览器加载了哪些文件及用时。 2. 使用npm 自带的分析工具，运行命令后后自动弹出分析结果网页。 npm run analyze Stat -- 转换前的体积 Parsed -- 最终打包体积 Gzippe
基于React和Ant Design的数据大屏展示设计源码
最新发布
04-03
本设计源码提供了一个基于React和Ant Design的数据大屏展示系统。项目包含27个文件，主要使用JavaScript、CSS和HTML编程语言。文件类型包括7个JavaScript文件、7个Map文件、6个CSS样式文件、2个PNG图片文件、1个ICO...
antd-library:用于 Ant Design 的 Axure 库
05-30
在Axure中，设计师通常需要手动绘制或寻找第三方资源来模拟UI组件，而"antd-library"的出现解决了这个问题。这个库包含了Ant Design的各种组件，如按钮、表格、模态框、下拉菜单、表单元素等，让设计师可以直接在...
webpack DllPlugin xxx is not defined解决办法
10-15
当遇到"webpack DllPlugin xxx is not defined"这样的错误时，通常意味着在配置或使用过程中出现了问题。以下是对这个问题的详细分析和解决方法： 1. **context上下文不一致**： 在 `DllPlugin` 和 `...
antd-img-crop:Ant用于Ant Design上传的图像裁剪器
04-28
antd-img-crop 用于Ant设计的图像裁剪器。 English |演示版安装yarn add antd-img-crop用法import ImgCrop from 'antd-img-crop' ;import { Upload } from 'antd' ;const Demo = ( ) => ( < ImgCrop> < Upload> + ...
Ant Design4.1.5版本离线版本文档
05-06
Ant Design 是一个流行的前端UI设计框架，主要用于构建高效、优雅的企业级Web应用。这个资源是Ant Design 4.1.5版本的离线文档，它提供了详细的组件和API指南，帮助开发者在没有网络连接的情况下也能查阅相关资料。...
graphX6.zip
12-06
antv x6自定义节点(使用vue渲染节点）的文件
记react中antd打包的坑体积太大和className命名
好好学习
11-26 8133
前端使用antd的时后打包体积太大， 如图1.6M还是挺大的，把antd所有的资源都加载进入了 根据antd 官网的推荐，按需加载方式居于.babel配置 这样再来看看打包分析的 按需加载打包了button和layout 在src文件下也只引用了这个两个组件 这样做很方便的，同时要在entry这里在添加一个antd就不对了, 又把整个antd打包进来了， 这样就不对了 entry: { ...
umi ant.design 项目打包后@ant-design文件占据内存太大
吃瓜群众的博客
02-04 1219
现在遇到一个问题，npm run build后打包文件由30M，用npm run analyze "analyze": "cross-env ANALYZE=1 umi build",分析后发现是图标库占据内存的原因。
ant-design-pro-vue 打包问题
雨竹的博客
05-23 1万+
由于以前一直使用iview，使用iview的脚手架一直没出过什么问题。所以当知道antd出vue版后，在新项目的原型使用了一下，一开始启动，修改都很愉快。结果没想到打包时出了问题。 通过标题可以知道我使用的脚手架是ant-design-pro-vue，这个脚手架采用的vue-cli3.0。 下面说说遇到的问题，由于没有仔细看过vue-cli3.0的...
ant-design-pro使用umi build打包内存溢出解决办法
sg_knight的专栏
12-11 2883
1、内存溢出错误提示 FATALERROR:Ineffectivemark-compactsnearheaplimitAllocationfailed-JavaScriptheapout of memory 2、错误原因分析 这个报错的原因就是Node内存不足所导致的，Node 是基于V8引擎，在一般的后端开发语言中，在基本的内存使用上没有什么限制，但是，在 Node 中通过 JavaScript 使用内存时只能使用部分内存（64位系统下约为1.4 GB，...
ant-design-pro 使用总结—自定义打包 构建配置
热门推荐
liusaint1992的专栏
11-04 3万+
ant-design-pro使用了umi.js，没有直接使用webpack，我们要配置自定义的构建打包跟直接的webpack配置不太一样。 首先，大部分的webpack打包配置都可以直接修改config/config.js来实现,比如 proxy，publicPath等。参考umi.js配置文档。https://umijs.org/zh/config/#基本配置。 这里记录一些针对性的配置。 ha...
antv x6 踩坑日记+屏幕适配方案
qq_36752532的博客
12-13 4641
vue2 基于官方模版封装的 vue 组件节点 坑一： 在点击拓扑图中触发 router.push() 事件 无法通过this 去调用 ， 通过引入router 来实现导航跳转，这个时候可能会无法携带参数，这个时候重启一下项目就好。 坑二： vue组件封装的节点 data 属性 和 节点传参数 的效果不一样 ，动态的属性，可以不用传过去，通过监听动态数值的改变 来进行API的调用，修改相应节点的数值。 ...
vendor.js过大，导致首次加载白屏时间很长
Admin_yws的博客
09-06 1041
原因分析：由于vendor体积较大，下载时间长，造成首屏加载缓慢 可以从以下方面减少整个包的体积： 1.npm install --save-dev compression-webpack-plugin，开启gzip压缩 2.productionSourceMap 设置为false 3.在index.html界面CDN引入 4.vue-router 路由懒加载 ...
vue项目打包后体积很大
小白阿里里的博客
11-09 4549
在通过 build 命令后得到项目文件发现体积很大，其实这是由于在打包时生成了.map 文件，因为项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。而 .map 文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 去除 .map 文件可以提升 build 速度，也可以保护源码。 去除方法：在 config/index.js 中修改参数， 找到...
运行出现Uncaught ReferenceError: Antd is not defined
10-17
这个错误提示表明你的代码中使用了 Antd 组件库，但是没有正确引入 Antd 库。你需要在代码中添加以下语句来引入 Antd 库： ```javascript import { Button } from 'antd'; ``` 这里以 Button 组件为例，你需要根据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值