octicons
octicons copied to clipboard
[Bug]: Using styled-octicons in development mode significantly bloats bundle
Describe the bug
Importing a single icon from styled-octicons into my Next.js React application increases the bundle size of the importing component from ~2 MB to ~350 MB in a development build when using the next dev
server. When viewing the files distributed as node_modules/@primer/styled-octicons/dist/icons/*
, it appears that every icon file includes every icon distributed. In a development build, all N icons are included fully N times, causing an N*N import footprint in the bundle. This causes the developer experience to become very slow and unstable.
Steps to reproduce
Steps to reproduce the behavior:
- Use
next dev
to run a Next development server. - Add import
import { CheckboxIcon } from '@primer/styled-octicons';
within React application using Next.js + webpack.
(The same issue appears when using: import * as StyledOcticons from '@primer/styled-octicons';
)
Expected behavior
When using import { CheckboxIcon } from '@primer/octicons-react';
the size of the resulting webpack component bundle is ~2 MB. It is not expected that the size would be exactly the same, but that the size difference would be less excessive.
In a production build using next build; next export
, the issue is resolved as the tree-shaking appears to correctly get rid of unused icons.
Device details
- OS:
Linux skylab-x1 6.1.41 #1-NixOS SMP PREEMPT_DYNAMIC Mon Jul 24 16:55:35 UTC 2023 x86_64 GNU/Linux
- Browser:
Firefox 115.0.2 (64-bit)
- Package
next
:13.4.12
- Package
@primer/styled-octicons
:19.5.0
- Package
@primer/octicons-react
:19.5.0
- Package
react
:18.2.0
Additional info
Version 17.5.0 is listed with an unpacked size of 1.4 MB: https://www.npmjs.com/package/@primer/styled-octicons/v/17.5.0
Version 17.8.0 is listed with an unpacked size of 107 MB: https://www.npmjs.com/package/@primer/styled-octicons/v/17.8.0
For those using Next.js, the following helps mitigate the issue:
const nextConfig = {
experimental: {
optimizePackageImports: [
'@primer/octicons-react',
'@primer/styled-octicons'
],
},
};
This is a severe build bug in the @primer/styled-octicons
package.
In short, each icon contains the whole library, even if unused.
This is /dist/icons/AccessibilityIcon.js
:
You're importing from the index, which internally looks like:
export {AccessibilityIcon.js} from './dist/AccessibilityIcon.js'
// etc repeated N times
So yes, that's why the weight is N*N 😅