with-ant-design bundle file is too big #4101

Shangyunliang · 2018-04-03T06:59:50Z

In the with-ant-design example, i think these file too big for production. Is this a bug?

Can we optimize it?

timneutkens · 2018-04-03T07:08:55Z

Try analyzing using https://github.com/zeit/next-plugins/tree/master/packages/next-bundle-analyzer

supra28 · 2018-04-04T09:16:05Z

I think it imports the whole css rather than importing just the css for the components that are used

xavxyz · 2018-04-05T08:37:20Z

CSS Bundle

⬆️ Server bundle, with almost no CSS loaded (~500 bytes? 🤔), click to read the tooltip

I think it imports the whole css rather than importing just the css for the components that are used

I believed the same, and it actually imports only what it needs in terms of CSS! 😄

I would guess the style.css file is "that big" because @zeit/next-css plugin SSR feature is a work in progress, see vercel/next-plugins#1

JS Bundle

⬆️ Client bundle, loading only the components specified in the example, click to read the tooltip

The index.js bundle is "that big" cause the example imports some heavy components (code), like the Form or the DatePicker.

These components are super-fully-featured and rely on other packages, like components from https://github.com/react-component/ or depend on moment (one-third of the bundle!)

Try just importing the Button and you'll see a neat difference! 📉

Conclusion

next-bundle-analyzer is dope! 🚀
When next-css is fixed, we shouldn't have to load CSS on the client 👌
antd is a great library, but can cost you in terms of size / dependencies! 👍

aimeefe · 2018-04-26T10:43:28Z

[
"import",
{
"libraryName": "antd"
}
]

lifuzhao100 · 2018-05-01T16:00:16Z

@aimeefe can u teach me how config babel-plugin-import with antd.now i got an error
@font-face {
^

SyntaxError: Invalid or unexpected token

ashinga48 · 2018-05-12T08:45:56Z

@Shangyunliang
Please have a look. @supra28 suggestion, i kept in an example.

## 1. ANT Design imports optimisation ( to reduce build size )
Replace

import { DatePicker, Avatar, Badge } from 'antd';
with

import DatePicker from 'antd/lib/date-picker';
import Avatar from 'antd/lib/avatar';
import Badge from 'antd/lib/badge';

with that build changed from 1.4MB to 560KB

## 2. ANT Design CSS import
Instead statical import of full css like this

import stylesheet from 'antd/dist/antd.min.css';
Use

import stylesheet from 'antd/lib/style/index.css'
import Badge_CSS from 'antd/lib/badge/style/index.css'

Example File

https://github.com/ashinga48/Fifi-NextJS-ANT-Design-Redux-Styled-JSX-with-SCSS/blob/master/pages/index.js

Hope it helps

supra28 · 2018-05-12T10:37:28Z

@ashinga48 babel-plugin-import from ant-design does those things automatically.
Docs

ladieman217 · 2018-07-21T01:39:36Z

@ashinga48 didn't work at all

Enalmada · 2018-09-20T05:49:38Z

Note there is some information in this thread about getting modular ant design.

kvedantmahajan · 2019-01-01T07:08:09Z

Webpack in CRA builds add to +219kb to initial chunk. Whereas importing manual way adds +12 i.e. becomes +231kb

qaiser110 · 2019-01-23T08:50:25Z

I've created src/client/icons.js at the root. In this file I have all the antd icons that I need like so:

export { default as SwapOutline } from '@ant-design/icons/lib/outline/SwapOutline';
export { default as UploadOutline } from '@ant-design/icons/lib/outline/UploadOutline';

And I've set the absolute imports in next.config.js:

const path = require('path')

module.exports = {
  webpack: function(config, options) {
    config.resolve.alias['@ant-design/icons/lib/dist$'] = path.join(__dirname, 'src/client/icons.js')
    return config
  },
}

Works for me, and I don't see the icons/dist in bundle analyzer. The bundle size is now reduced by 500k

mssaisandeep · 2019-02-07T23:32:04Z

Hello,

From antd 3.5 version. when I try to install npm. I am observing "@antdesign" package in nodemodules. When I try to build (npm build which uses webpack) for production and analyze the build, I am getting 2MB for that @antdesign package. Is there anyone facing the same issue?

Note: I have used Babel-Import-Plugin and added the following thing as a configuration in webpack:

plugins: [
            ['import', { libraryName: "antd", libraryDirectory: "lib", style: "css" }],
          ],

I tried different syntaxes using Babel-Import-Plugin (BTW, latest version) but couldn't able to reduce the production build.

Please help me in figuring it out.

mssaisandeep · 2019-02-07T23:34:01Z

Hello,

From antd 3.5 version. when I try to install npm. I am observing "@antdesign" package in nodemodules. When I try to build (npm build which uses webpack) for production and analyze the build, I am getting 2MB for that @antdesign package. Is there anyone facing the same issue?

Note: I have used Babel-Import-Plugin and added the following thing as a configuration in webpack:
plugins: [
            ['import', { libraryName: "antd", libraryDirectory: "lib", style: "css" }],
          ],
I tried different syntaxes using Babel-Import-Plugin (BTW, latest version) but couldn't able to reduce the production build.

Please help me in figuring it out.

I am not even using any @antddesign icons. I am just using few antd components which are also showing as separate in bundle analyzer. Please find the screenshot

mssaisandeep · 2019-02-08T19:28:51Z

Hello,
From antd 3.5 version. when I try to install npm. I am observing "@antdesign" package in nodemodules. When I try to build (npm build which uses webpack) for production and analyze the build, I am getting 2MB for that @antdesign package. Is there anyone facing the same issue?
Note: I have used Babel-Import-Plugin and added the following thing as a configuration in webpack:
plugins: [
            ['import', { libraryName: "antd", libraryDirectory: "lib", style: "css" }],
          ],
I tried different syntaxes using Babel-Import-Plugin (BTW, latest version) but couldn't able to reduce the production build.
Please help me in figuring it out.
I am not even using any @antddesign icons. I am just using few antd components which are also showing as separate in bundle analyzer. Please find the screenshot

(Or)
Is there any way that I can exclude @ant-design package from production build? I am using web pack to bundle. Please please help me.

poorel · 2019-03-07T10:04:35Z

您好，
来自antd 3.5版本。当我尝试安装npm时。我正在观察nodemodules中的 “ @antdesign ”包。当我尝试构建（使用webpack的npm build）进行生产并分析构建时，我获得了2MB的@antdesign包。有没有人面临同样的问题？
注意：我使用了Babel-Import-Plugin并在webpack中添加了以下内容作为配置：
plugins: [
            ['import', { libraryName: "antd", libraryDirectory: "lib", style: "css" }],
          ],
我使用Babel-Import-Plugin（BTW，最新版本）尝试了不同的语法，但无法减少生产构建。
请帮我搞清楚。
我甚至没有使用任何@antddesign图标。我只是使用很少的antd组件，它们也在bundle分析器中显示为独立的。请找截图
（或）
有什么方法可以从生产版本中排除@ ant-design包吗？我正在使用网络包捆绑。请帮帮我。

Hello,
From antd 3.5 version. when I try to install npm. I am observing "@antdesign" package in nodemodules. When I try to build (npm build which uses webpack) for production and analyze the build, I am getting 2MB for that @antdesign package. Is there anyone facing the same issue?
Note: I have used Babel-Import-Plugin and added the following thing as a configuration in webpack:
plugins: [
            ['import', { libraryName: "antd", libraryDirectory: "lib", style: "css" }],
          ],
I tried different syntaxes using Babel-Import-Plugin (BTW, latest version) but couldn't able to reduce the production build.
Please help me in figuring it out.
I am not even using any @antddesign icons. I am just using few antd components which are also showing as separate in bundle analyzer. Please find the screenshot
(Or)
Is there any way that I can exclude @ant-design package from production build? I am using web pack to bundle. Please please help me.

me too.I have the same problem. ask for help.

stephankaag · 2019-03-07T12:56:14Z

See: ant-design/ant-design#12011
Workaround until fixed (more or less the same as @qaiser110's): ant-design/ant-design#12011 (comment)

blooddrunk · 2019-08-18T04:35:17Z

I'm using the config from with-ant-design-less example, but the client bundle size is too big even for a page with only a single Button in it, could this be an ant-design specific problem?

Why ismoment.js bundled for a Button component?

typeofweb · 2019-10-18T10:00:45Z

I managed to reduce the bundle size by adding 2 lines to my next.config.js:

config.resolve.alias['@ant-design/icons/lib/dist$'] = path.join(__dirname, 'icons.js')
config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),)

timneutkens · 2019-11-05T05:45:11Z

@janlukasschroeder that looks like a config for cra which is different from Next.js.

luisgserrano · 2019-12-10T16:12:16Z

@mmiszy How do you know which icons you need to import if you're using, e.g the pagination component from antd?

simjoeweb · 2020-01-05T22:51:59Z

If you want to remove unused momentjs locales:

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
  webpack: function(config, options) {
    config.plugins.push(new MomentLocalesPlugin())
    return config
  },
}

Check out: https://www.npmjs.com/package/moment-locales-webpack-plugin

Change according to issue in next.js, no side effect yet. vercel/next.js#4101 (comment)

Timer · 2020-01-21T13:56:34Z

Duplicate of #9830

balazsorban44 · 2022-01-30T15:05:40Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

timneutkens added help wanted good first issue Easy to fix issues, good for newcomers labels Apr 3, 2018

timneutkens added the examples Issue was opened via the examples template. label Mar 9, 2019

dosentmatter mentioned this issue Aug 29, 2019

Svg icons make bunlde size too large ant-design/ant-design#12011

Closed

1 task

LucasBassetti mentioned this issue Aug 29, 2019

Overrides configs to reduce the bundle size in antd not working as expected ant-design/ant-design#18565

Closed

1 task

timneutkens mentioned this issue Oct 19, 2019

Tree shaking seems to be broken in antd example #9141

Closed

This comment has been minimized.

Sign in to view

freedomlang added a commit to freedomlang/kiri-frontend that referenced this issue Jan 8, 2020

chore: Update webpack config to reduce bundle size

4de6a6e

Change according to issue in next.js, no side effect yet. vercel/next.js#4101 (comment)

Timer marked this as a duplicate of #9830 Jan 21, 2020

Timer closed this as completed Jan 21, 2020

mjgasior mentioned this issue Nov 3, 2020

GQL playground not disabled in production mjgasior/cracker-app#119

Closed

vercel locked as resolved and limited conversation to collaborators Jan 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

with-ant-design bundle file is too big #4101

with-ant-design bundle file is too big #4101

Shangyunliang commented Apr 3, 2018

timneutkens commented Apr 3, 2018

supra28 commented Apr 4, 2018

xavxyz commented Apr 5, 2018

aimeefe commented Apr 26, 2018

lifuzhao100 commented May 1, 2018 •

edited

Loading

ashinga48 commented May 12, 2018

supra28 commented May 12, 2018

ladieman217 commented Jul 21, 2018

Enalmada commented Sep 20, 2018

kvedantmahajan commented Jan 1, 2019

qaiser110 commented Jan 23, 2019 •

edited

Loading

mssaisandeep commented Feb 7, 2019

mssaisandeep commented Feb 7, 2019

mssaisandeep commented Feb 8, 2019

poorel commented Mar 7, 2019

stephankaag commented Mar 7, 2019 •

edited

Loading

blooddrunk commented Aug 18, 2019 •

edited

Loading

typeofweb commented Oct 18, 2019

This comment has been minimized.

timneutkens commented Nov 5, 2019

luisgserrano commented Dec 10, 2019

simjoeweb commented Jan 5, 2020

Timer commented Jan 21, 2020

balazsorban44 commented Jan 30, 2022

with-ant-design bundle file is too big #4101

with-ant-design bundle file is too big #4101

Comments

Shangyunliang commented Apr 3, 2018

In the with-ant-design example, i think these file too big for production. Is this a bug?

Can we optimize it?

timneutkens commented Apr 3, 2018

supra28 commented Apr 4, 2018

xavxyz commented Apr 5, 2018

CSS Bundle

JS Bundle

Conclusion

aimeefe commented Apr 26, 2018

lifuzhao100 commented May 1, 2018 • edited Loading

ashinga48 commented May 12, 2018

supra28 commented May 12, 2018

ladieman217 commented Jul 21, 2018

Enalmada commented Sep 20, 2018

kvedantmahajan commented Jan 1, 2019

qaiser110 commented Jan 23, 2019 • edited Loading

mssaisandeep commented Feb 7, 2019

mssaisandeep commented Feb 7, 2019

mssaisandeep commented Feb 8, 2019

poorel commented Mar 7, 2019

stephankaag commented Mar 7, 2019 • edited Loading

blooddrunk commented Aug 18, 2019 • edited Loading

typeofweb commented Oct 18, 2019

This comment has been minimized.

timneutkens commented Nov 5, 2019

luisgserrano commented Dec 10, 2019

simjoeweb commented Jan 5, 2020

Timer commented Jan 21, 2020

balazsorban44 commented Jan 30, 2022

lifuzhao100 commented May 1, 2018 •

edited

Loading

qaiser110 commented Jan 23, 2019 •

edited

Loading

stephankaag commented Mar 7, 2019 •

edited

Loading

blooddrunk commented Aug 18, 2019 •

edited

Loading