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

最近项目中使用的UI组件库，由antd2升级到了antd3，webpack打包逻辑不变，并且用了babel-plugin-import使组件按需加载。 但是打包后发现，打包后的文件还是很大，压缩之后超过1M，最后查找原因发现： plugins: [ ["import", { "libraryName": "antd", ...

起源主要来自我们通过微前端加载一个子应用时，结合devTool的network模块发现子应用的包有点太大了，chunk-vendor包有接近700多KB，在网速不好情况下可能需要大几s才能拉下来，所以尝试去优化该子应用的包大小优化之前首先要分析该应用的包构成，关注是哪些模块占据了较大空间，才能有针对性的着手优化。这里无论是react还是vue项目，都可以借助webpack-bundle-analyze工具来进行分析我这里是vue项目，直接基于vue-cli- service配置一下就可使用： 接着打包的di

背景 　　最近自己整了一个基于webpack4和react开发的博客demo项目，一路整下来磕磕碰碰但也实现了功能，就准备发到阿里云上面去看看，借用了同事的阿里云小水管服务器，配置完成之后首页加载花了十几秒，打开控制台network查看资源，打包的js体积有将近6M，及其影响访问体验，于是就开始了优化的路。 原因和解决方法 　　在webpack的配置文件中，对公共js做了抽取，分别会打...

开始 这一章讲打包体积优化，这个也算是最重要的一章了，我之前可是花了很多时间去查资料怎么优化打包体积的，不同版本的webpack之间还有一些区别，所以也算踩了很多的坑，所以这一章会比较长。 这边我大概写了一下页面具体布局，是下面这样的： 我们再去看一下打包体积，有2.75M，已经算很大了： 我们使用一个打包可视化的插件来看看都有什么被打包进去了，我们执行： yarn add webpack-b...

Ant-design CSS 按需加载和打包优化 最近使用蚂蚁金服的 ant-design-mobile 组件，下面记录一下使用过程的问题。 官方安装文档如下 https://github.com/ant-design/ant-design-mobile/blob/master/docs/react/introduc...

最近在学习并使用webpack+react+antd写了一个小项目，也可以说是demo，待全部开发完成后发现webpack的打包文件足足有将近13.3MB，快吓死宝宝了，经过连续几天的学习和调试最后将打包文件缩小到665kb,效果十分显著，网上有许多解决办法，大多对新手都不是很友好，涉及到的知识点十分的多，导致一步一坑，虽然这边文章不是最好的，但通过如下的调试缩小其打包文件。 项目github连接...

请输入代码项目是react全站的单页应用，主要的库是antd+自己写的scss和一些表单，cookie等处理逻辑，.jsx大概有15个左右.用webpack构建的，在开发环境用的webpack-dev-server启动的，webpack.config.js如下图:'”use strict”;let webpack = require('webpack');let path = require('p...

前言 项目后台使用antd的组件，一直感觉很好很强大。无奈整体打包的话太大，光是antd的js就有990k(3.1.1)，所以着手优化打包后的大小。 使用官方推荐的babel-plugin-import插件 基本上前期组件使用少的情况下，这个插件完美解决了问题。这个插件其实是优化了写法，将本应该 import Button from 'antd/lib/button'; import 'antd/...

Hello，大家好，欢迎使用Webfunny前端监控和埋点平台。最近，开始有一些小伙伴向我们反馈，webfunny页面加载速度比较慢，且偶尔会出现页面崩溃的情况。刚开始我是不大相信的，因为在我的电脑上访问，感觉都是很正常的，直到我把浏览器文件的压缩对比打开后，才发现：经过这么长时间的功能迭代，前端项目打包的体积已经变得如此臃肿了！！！非常惭愧，是我们疏忽了！接下来我们将对Webfunny进行两期的体积优化，争取能够给大家一个更好的使用体验。

随着项目越来越大，打包后的体积很大，打包时间也很长，部署一次基本上要等十分钟左右。那么如何来优化打包体积和提高打包速度呢？一起来看看吧～

vue3 ,vite,ant design vue 极限优化打包大小,动态导入css

ant-pro打包优化

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

解决React+Ant Design 打包后vendors.js过大问题 React项目常用Webpack进行打包，Webpack中有一个功能是Code Spliting，使用该模块可以减少重复引用的模块，就是通过配置将一些公共模块例如react、react-dom打包到vendors.js中，只引用一次。避免了每次不同页面引入的时候，都打包一份相同的代码。但是这样会有一个问题，会导致vendor...

我目前使用的antd版本是2.13。现在最新的是3.0.1。 脚手架工具就是create-react-app。创建完成项目后，需添加配置，执行yarn eject 也就是打开配置的文档。 找到config文件夹。里面有2个配置文档， webpack.config.dev.js和webpack.config.prod.js 添加配置时一定要保持文档的一致性。我就是犯了错误，值配置了开发的没有配

preProcessor对less-loader进行判断-是否存在。关闭性能提示 performance:false。给组件添加样式 button app.jsx。splitChunks进行单独打包。在main.js引入样式。并且引入less样式。

antd@3.16.5我们可以看到有一个dist，大概占到540KB，是一些icons资源文件，只要你在代码中使用了icon标签就会把整个icon资源文件打包进来，目前主要的解决办法参考[antd#12011](https://github.com/ant-design/ant-design/issues/12011#issuecomment-420038579)，希望能给遇到问题得小伙伴带来帮助...

借助config-overrides.js+customize-cra在不暴露webpack文件时修改打包的配置对象

背景 一个 antd 项目打包时间太长，竟然快二十分钟了，有时还会导致内存溢出，查了一些资料（thanksfunfish），解决方法如下 roadhog.js问题 roadhog.js 是类似可配置的 react-create-app，只是这个可配置，也只是部分可配置的，木有办法，只能从源码开始看 webpack 配置。 在进行npm run build的时候发现终端有提示Crea...