mirror of
https://github.com/bulwarkmail/native.git
synced 2026-10-31 16:06:32 +00:00
Linus Rath
063432bf28
93 files import icons from the `lucide-react-native` barrel. Metro has
no tree shaking, so the barrel pulled all 1,694 icons into the bundle
and evaluated every one of them at startup.
A small Babel plugin (`scripts/babel-plugin-lucide-imports.js`, wired
up in the new `babel.config.js` on top of `babel-preset-expo`) rewrites
each named import to the per-icon module the barrel re-exports, e.g.
`import { Mail } from 'lucide-react-native'` becomes a default import of
`lucide-react-native/dist/esm/icons/mail.js`. The name table is read
from the package's own barrel, so aliases such as `MailIcon` or renamed
icons keep resolving; an unknown name fails the build. The package's
`exports` map only lists the barrel, so the new `metro.config.js`
resolves these deep paths as plain files instead of warning about each.
A test checks that every icon imported in the app maps to an existing
module and that no default or namespace import brings the barrel back.
Measured with `npx expo export --platform android`:
- modules in the bundle: 3,995 -> 2,469 (lucide: 1,701 -> 175)
- Hermes bundle: 9.34 MB -> 8.19 MB
- modules evaluated at startup: 3,564 -> 2,038
Metro does not key its transform cache on the Babel config, so a warm
dev cache keeps serving the old barrel imports until
`npx expo start --clear`.
16 lines
503 B
JavaScript
16 lines
503 B
JavaScript
const path = require('node:path');
|
|
|
|
// babel-preset-expo ships inside `expo` rather than as a direct dependency, so
|
|
// resolve it from there; this is the preset Expo uses when no config exists.
|
|
const presetExpo = require.resolve('babel-preset-expo', {
|
|
paths: [path.dirname(require.resolve('expo/package.json'))],
|
|
});
|
|
|
|
module.exports = function babelConfig(api) {
|
|
api.cache(true);
|
|
return {
|
|
presets: [presetExpo],
|
|
plugins: [require.resolve('./scripts/babel-plugin-lucide-imports')],
|
|
};
|
|
};
|