Skip to content

Commit 242d7e2

Browse files
maartenbreddelsmaartenbreddels
authored
performance: shrink js bundle size by avoiding jupyterlab dependencies (#422)
This gets rid of React, CodeMirror, blueprint Yjs and other smaller dependencies that we do not need in solara. Some of the original dependencies are added back in: voila-dashboards/voila#481
1 parent 17d9ca6 commit 242d7e2

File tree

9 files changed

+1287
-118
lines changed

9 files changed

+1287
-118
lines changed

‎packages/solara-vuetify-app/package-lock.json‎

Lines changed: 375 additions & 64 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/solara-vuetify-app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"mini-css-extract-plugin": "^2.7.2",
2828
"style-loader": "^0.23.1",
2929
"webpack": "^5.73.0",
30+
"webpack-bundle-analyzer": "^4.10.1",
3031
"webpack-cli": "^5.1.4"
3132
}
3233
}

‎packages/solara-vuetify-app/src/empty.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// used as alias to avoid bundling unused code

‎packages/solara-vuetify-app/webpack.config.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
var path = require('path');
22
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3+
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
4+
5+
const analyzerPlugins = process.env.ANALYZE === "true" ? [
6+
new BundleAnalyzerPlugin({analyzerPort: 9999})] : [];
37

48
var rules = [
59
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
@@ -57,7 +61,7 @@ module.exports = [
5761
mode: 'development',
5862
},
5963
{
60-
plugins: [new MiniCssExtractPlugin()],
64+
plugins: [new MiniCssExtractPlugin(), ...analyzerPlugins],
6165
entry: './src/solara-vuetify-app.js',
6266
output: {
6367
filename: 'solara-vuetify-app8.min.js',
@@ -69,9 +73,20 @@ module.exports = [
6973
module: {
7074
rules: rules
7175
},
76+
optimization: {
77+
concatenateModules: false,
78+
},
7279
resolve: {
7380
alias: {
7481
"@widgetti/solara-widget-manager": "@widgetti/solara-widget-manager8",
82+
// why would we need codemirror?
83+
'@jupyterlab/codemirror': path.resolve(__dirname, "src", "empty.js"),
84+
// used in @jupyterlab/rendermine/lib/registry
85+
'@jupyterlab/apputils/lib/sanitizer': path.resolve(__dirname, "src", "empty.js"),
86+
// do not think we use these
87+
'htmlparser2': path.resolve(__dirname, "src", "empty.js"),
88+
'postcss': path.resolve(__dirname, "src", "empty.js"),
89+
'moment': path.resolve(__dirname, "src", "empty.js"),
7590
}
7691
},
7792
mode: 'production',

‎packages/solara-widget-manager/src/manager.ts‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,14 @@
99

1010
import {
1111
WidgetManager as JupyterLabManager,
12+
} from '@jupyter-widgets/jupyterlab-manager/lib/manager';
13+
14+
import {
1215
WidgetRenderer
13-
} from '@jupyter-widgets/jupyterlab-manager';
16+
} from '@jupyter-widgets/jupyterlab-manager/lib/renderer';
1417

1518

16-
import { output } from '@jupyter-widgets/jupyterlab-manager';
19+
import * as output from '@jupyter-widgets/jupyterlab-manager/lib/output';
1720

1821
import * as base from '@jupyter-widgets/base';
1922
import * as controls from '@jupyter-widgets/controls';
@@ -24,10 +27,7 @@ import '@jupyter-widgets/controls/css/widgets-base.css';
2427
// Voila imports the following css file, not sure why
2528
// import '@jupyter-widgets/controls/css/widgets.built.css';
2629

27-
import * as Application from '@jupyterlab/application';
28-
import * as AppUtils from '@jupyterlab/apputils';
2930
import * as CoreUtils from '@jupyterlab/coreutils';
30-
import * as DocRegistry from '@jupyterlab/docregistry';
3131
import * as OutputArea from '@jupyterlab/outputarea';
3232

3333
import { DocumentRegistry } from '@jupyterlab/docregistry';
@@ -251,10 +251,7 @@ export class WidgetManager extends JupyterLabManager {
251251
window.define('@jupyter-widgets/controls', controls);
252252
window.define('@jupyter-widgets/output', output);
253253

254-
window.define('@jupyterlab/application', Application);
255-
window.define('@jupyterlab/apputils', AppUtils);
256254
window.define('@jupyterlab/coreutils', CoreUtils);
257-
window.define('@jupyterlab/docregistry', DocRegistry);
258255
window.define('@jupyterlab/outputarea', OutputArea);
259256

260257
window.define('@phosphor/widgets', LuminoWidget);

0 commit comments

Comments
 (0)