antd按需加载优化打包后文件大小

最新推荐文章于 2024-05-21 23:44:13 发布
最新推荐文章于 2024-05-21 23:44:13 发布
阅读量909 收藏
点赞数
分类专栏： 前端知识点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alison_Z/article/details/114063262
版权
博客详细介绍了如何通过按需加载优化antd库，使得打包后的文件大小从2.7MB大幅减小到912KB。优化包括了对antd的配置调整，以及针对momentjs的精简使用，仅保留中文和英文语言包，并用new Date()替代moment来进一步减少体积。
摘要由CSDN通过智能技术生成

 

antd按需加载前：

优化antd按需加载后：

优化momentjs后：

只引入中文和英文两个语言包：

new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-gb|zh-cn/),

<
最低0.47元/天 解锁文章
快乐的小z
关注
专栏目录
create-react-app使用antd按需加载的样式无效问题的解决
10-17
在使用Create React App构建React项目时，集成Ant Design (antd) UI库，并希望通过按需加载样式以减少打包文件的体积是一种常见的做法。但有时候可能会遇到按需加载样式无效的问题，这通常是因为样式文件没有正确...
使用babel-plugin-import按需加载antd3组件，打包后文件还很大的问题。
monkey_shuo的博客
07-11 1465
最近项目中使用的UI组件库，由antd2升级到了antd3，webpack打包逻辑不变，并且用了babel-plugin-import使组件按需加载。 但是打包后发现，打包后的文件还是很大，压缩之后超过1M，最后查找原因发现： plugins: [ ["import", { "libraryName": "antd", ...
记一次包大小优化过程
--Joern的物联领域--
06-17 902
起源主要来自我们通过微前端加载一个子应用时，结合devTool的network模块发现子应用的包有点太大了，chunk-vendor包有接近700多KB，在网速不好情况下可能需要大几s才能拉下来，所以尝试去优化该子应用的包大小优化之前首先要分析该应用的包构成，关注是哪些模块占据了较大空间，才能有针对性的着手优化。这里无论是react还是vue项目，都可以借助webpack-bundle-analyze工具来进行分析我这里是vue项目，直接基于vue-cli- service配置一下就可使用： 接着打包的di
记react中antd打包的坑体积太大和className命名
好好学习
11-26 8180
前端使用antd的时后打包体积太大， 如图1.6M还是挺大的，把antd所有的资源都加载进入了 根据antd 官网的推荐，按需加载方式居于.babel配置 这样再来看看打包分析的 按需加载打包了button和layout 在src文件下也只引用了这个两个组件 这样做很方便的，同时要在entry这里在添加一个antd就不对了, 又把整个antd打包进来了， 这样就不对了 entry: { ...
记一次webpack4+react+antd项目优化打包文件体积的过程
weixin_30408309的博客
03-20 896
背景 　　最近自己整了一个基于webpack4和react开发的博客demo项目，一路整下来磕磕碰碰但也实现了功能，就准备发到阿里云上面去看看，借用了同事的阿里云小水管服务器，配置完成之后首页加载花了十几秒，打开控制台network查看资源，打包的js体积有将近6M，及其影响访问体验，于是就开始了优化的路。 原因和解决方法 　　在webpack的配置文件中，对公共js做了抽取，分别会打...
重构之路：webpack打包体积优化（超详细）
weixin_34167819的博客
02-22 1442
开始 这一章讲打包体积优化，这个也算是最重要的一章了，我之前可是花了很多时间去查资料怎么优化打包体积的，不同版本的webpack之间还有一些区别，所以也算踩了很多的坑，所以这一章会比较长。 这边我大概写了一下页面具体布局，是下面这样的： 我们再去看一下打包体积，有2.75M，已经算很大了： 我们使用一个打包可视化的插件来看看都有什么被打包进去了，我们执行： yarn add webpack-b...
浅谈webpack性能榨汁机(打包速度优化)
10-17
但是，作者指出项目中原有的dll配置并没有将如antd这样的UI库包含进去，原因是这类库需要按需加载。作者建议为第三方库单独创建一份dll配置文件，并且在babel的配置中设置为不包含babel-plugin-import插件，因为这个...
webpack4 SCSS提取和懒加载的示例
10-18
这不仅可以减少最终打包文件的大小，还可以避免因内联样式导致的页面重绘和重排，提升页面性能。 在介绍具体配置之前，我们需要理解懒加载（Lazy Loading）的概念。懒加载是一种优化策略，它允许我们将应用中的资源...
react-antd-demo:React演示
05-17
按需加载优化 没有按需加载前是这样的 可以看到页面加载了一个bundle.js文件，文件大小达到1.9M，代码量是26万行，虽然是后台管理，但是对于这样把所有js全部打包到一个js里面，页面初次加载出现长时间等待的情况，...
Ant-design CSS 按需加载和打包优化
MichaelAn的博客
02-13 573
Ant-design CSS 按需加载和打包优化 最近使用蚂蚁金服的 ant-design-mobile 组件，下面记录一下使用过程的问题。 官方安装文档如下 https://github.com/ant-design/ant-design-mobile/blob/master/docs/react/introduc...
React + Antd + Wepack 项目体积优化记录（一期）
最新发布
b826604005的博客
05-21 905
Hello，大家好，欢迎使用Webfunny前端监控和埋点平台。最近，开始有一些小伙伴向我们反馈，webfunny页面加载速度比较慢，且偶尔会出现页面崩溃的情况。刚开始我是不大相信的，因为在我的电脑上访问，感觉都是很正常的，直到我把浏览器文件的压缩对比打开后，才发现：经过这么长时间的功能迭代，前端项目打包的体积已经变得如此臃肿了！！！非常惭愧，是我们疏忽了！接下来我们将对Webfunny进行两期的体积优化，争取能够给大家一个更好的使用体验。
Antd React UMI 配置优化 - 优化打包体积，提高打包速度
weixin_43805705的博客
12-05 2511
随着项目越来越大，打包后的体积很大，打包时间也很长，部署一次基本上要等十分钟左右。那么如何来优化打包体积和提高打包速度呢？一起来看看吧～
react 打包体积过大_【React】webpack+antd打包后文件体积过大(16.4M)，如何优化
weixin_42542420的博客
12-23 1355
请输入代码项目是react全站的单页应用，主要的库是antd+自己写的scss和一些表单，cookie等处理逻辑，.jsx大概有15个左右.用webpack构建的，在开发环境用的webpack-dev-server启动的，webpack.config.js如下图:'”use strict”;let webpack = require('webpack');let path = require('p...
react配置antd的按需加载。
well2049的博客
12-14 2万+
我目前使用的antd版本是2.13。现在最新的是3.0.1。 脚手架工具就是create-react-app。创建完成项目后，需添加配置，执行yarn eject 也就是打开配置的文档。 找到config文件夹。里面有2个配置文档， webpack.config.dev.js和webpack.config.prod.js 添加配置时一定要保持文档的一致性。我就是犯了错误，值配置了开发的没有配
记一次 webpack 打包体积优化
weixin_33971205的博客
02-22 256
手头做的项目开发得差不多了，而打包配置是一开始粗略配置的，不大的项目打包出来得6MB+，所以现在必须进行优化。 打包结果分析 执行命令 webpack --profile --json > stats.json ，可以将打包过程的详细信息以 json 格式记录到文件中。依据该文件，webpack-bundle-analyzer、We...
antd design 大小优化
ISaiSai的专栏
01-14 5137
antd design 直接引用的话体积较大，不压缩4M 可以通过 babel-plugin-import,实现按需加载,仅仅会加载用到的组件的js 和css https://www.npmjs.com/package/babel-plugin-import demo{ test: /\.jsx$/, loader: "babel",
一、antd简介
热门推荐
rocktanga的博客
11-15 4万+
版本：v3.26.3 react系列有一大堆的组件，可以在ant design官网的，社区精选组件里面看到 一、简介 antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 ✅ Ant Design：用空格分隔的首字母大写单词，指代设计语言。 ✅ antd：全小写，指代 React UI 组件库。 ✅ ant.design：特指 ant.design 网站网址。 安装：npm install antd --save 使用组.
实现antd的按需加载
weixin_34023863的博客
09-17 1015
引言 create-react-app：是一个创建react项目特别方便的脚手架，他帮我们配置好了各种需要使用的工具，减少了很多工作量。antd：是蚂蚁金服推出的一个很优秀的react UI库，其中包含了很多我们经常使用的组件，对于小白学习react来说十分友好！ 当我们没有进行任何配置直接在这个项目中使用antd库时，会在控制台看到...
React + antd + webpack打包优化，首屏加载优化
weixin_34191734的博客
02-26 3526
1. 业务js按需加载 实现页面代码分割、按需加载 —— react-loadable 实现路由代码分割具体使用：npm install react-loadable --save复制代码在.babelrc文件中配置：{ "plugins": [ ..., "syntax-dynamic-import", ], },复制代码在路由文件中：import...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值