jupyter-ai slows down initial page load significantly by downloading 4MB of icons it does not need

[krassowski]

Description

This is because of dependency on @mui/icons-material and lack of any control what of it gets included.

Reproduce

Expected behavior

jupyter-ai does not stall opening JupyterLab nor Jupyter Notebook

Context

• JupyterLab version: 4.3.x

[krassowski]

There is 16 icons from @mui/icons-material in use:

jupyter-ai/packages/jupyter-ai/src/slash-autocompletion.tsx

Lines 5 to 14 in 4154733

	import {
	Download,
	FindInPage,
	Help,
	MoreHoriz,
	MenuBook,
	School,
	HideSource,
	AutoFixNormal
	} from '@mui/icons-material';

jupyter-ai/packages/jupyter-ai/src/components/settings/existing-api-keys.tsx

Lines 9 to 16 in 4154733

	import {
	Edit,
	DeleteOutline,
	Cancel,
	Check,
	Visibility,
	VisibilityOff
	} from '@mui/icons-material';

jupyter-ai/packages/jupyter-ai/src/components/chat-settings.tsx

Lines 18 to 19 in 4154733

	import SettingsIcon from '@mui/icons-material/Settings';
	import WarningAmberIcon from '@mui/icons-material/WarningAmber';

Half of these are already available in JupyterLab core (Download, Cancel, Edit, Settings, Check, Warning, Help). Using icons from core and adding SVG for icons which are not in core would probably be the best for performance.

In any case we do not need to fetch ~2200 icons.

[krassowski]

Also one can verify that this is issue in how jupyter-ai is compiled by downloading the source or wheel from https://pypi.org/project/jupyter-ai/2.29.0/#files and analyzing the size of the unpacked archive (yes, after compression it is smaller, but unpacked it is 6MB):

[krassowski]

The solution is to either configure tree-shaking (not sure what is wrong with webpack config here), or to use path imports instead of top-level imports, see:

• https://mui.com/material-ui/guides/minimizing-bundle-size/#when-and-how-to-use-tree-shaking
• https://mui.com/material-ui/guides/minimizing-bundle-size/#option-one-use-path-imports

Of note, I already put path imports in jupyter-ai/packages/jupyter-ai/src/components/chat-settings.tsx but these need to be used everywhere.

[krassowski]

to either configure tree-shaking (not sure what is wrong with webpack config here),

Ah, it seems like maybe nothing is wrong in config, webpack just does not shake with module federation, unless it is tricked into doing that with using a dummy shared package as described in: webpack/webpack#12532

[dlqqq]

Thanks for reporting this! I didn't know that Webpack doesn't tree shake when module federation is used. I think we need to first add a CI step that fails when importing from @mui/icons-material instead of @mui/icons-material/XYZ. Even if we manually update all MUI imports to be path imports today, our bundle size could easily be inflated by an accidental change from a new contributor.

It's unlikely that I will find the time to dive deep into this. @krassowski Do you have any suggestions on how we can enforce path imports?

[krassowski]

I looked into some alternatives, like using babel-plugin-import (requires setting up babel in addition to TS), using a typescirpt plugin (there is a few repos with import path transformers but nothing which would work out of the box for this use case; I wrote TypeScript transformers before and will only write another one if someone sponsors it - there is just a lot of edge cases to handle, not to mention that TypeScript still does not have an public entry point for transformers in tsc config see microsoft/TypeScript#14419).

So yes, probably using eslint to enforce path imports with no-restricted-imports would be best for now.