search

jupyterlab / jupyterlab

JupyterLab computational environment.
https://jupyterlab.readthedocs.io/
Other
14.07k stars 3.3k forks source link

Minify CSS #14424

Open warri93 opened 1 year ago

warri93 commented 1 year ago

"@jupyterlab/application": "3.5.2", "@jupyterlab/cells": "3.5.2", "@jupyterlab/codemirror": "3.5.2", "@jupyterlab/completer": "3.5.2", "@jupyterlab/docmanager": "3.5.2", "@jupyterlab/docregistry": "3.5.2", "@jupyterlab/documentsearch": "3.5.2", "@jupyterlab/mathjax2": "3.5.2", "@jupyterlab/notebook": "3.5.2", "@jupyterlab/rendermime": "3.5.2",

I have jupyterlab in an Angular NX application (V15) but every time I open up my chrome dev tools, the app completely crashes. When diving into it, I see that the created index.css file is almost 20MB. Is there an option to minimize this?

welcome[bot] commented 1 year ago

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively. welcome You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! :wave:
Welcome to the Jupyter community! :tada:

JasonWeill commented 1 year ago

I was looking through the CSS rules with Firefox dev tools, and found that the largest rule sets come from Blueprint JS. We no longer use Blueprint in JupyterLab 4.0, which is now in beta (4.0.0b2). Can you try reproducing this with JupyterLab 4.0, and see whether you have the same problem?

warri93 commented 1 year ago

Hi,

I checked with version 4.0 and indeed see that the bundle size is already smaller with the remove of Blueprint. It went down from 19MB to 9MB. That already helps a lot, thank you! Dev tools aren't crashing anymore but still a bit slow. Is there a possibility to also minify the css files that are provided so that we can include that one in our application?

Thanks for checking this out!

fcollonval commented 1 year ago

@warri93 we have to use webpack to deduplicate CSS import across the various @jupyterlab/ packages. I'm wondering if you are not bitten by that. You should be able to see quickly if some rules are imported multiple times.