Open pveierland opened 10 months ago
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 😅
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 asnode_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:
next dev
to run a Next development server.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
Linux skylab-x1 6.1.41 #1-NixOS SMP PREEMPT_DYNAMIC Mon Jul 24 16:55:35 UTC 2023 x86_64 GNU/Linux
Firefox 115.0.2 (64-bit)
next
:13.4.12
@primer/styled-octicons
:19.5.0
@primer/octicons-react
:19.5.0
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