Page MenuHomePhabricator

[dagit] Lazy import CodeMirror
ClosedPublic

Authored by dish on Jan 20 2021, 10:13 PM.

Details

Summary

Remove CodeMirror from the main vendor bundle by using React.lazy on ExecutionSessionContainer, the only use case of the CodeMirror package in Dagit. ExecutionSessionContainer also becomes its own chunk, which reduces the application bundle as well.

File sizes after gzip:

Before:

  669.66 KB  build/static/js/2.d336297b.chunk.js
  153.37 KB  build/static/js/main.9dc0e9c2.chunk.js
  33.92 KB   build/static/css/2.56579013.chunk.css
  32.28 KB   build/922792c33f2e681c1472.worker.js
  771 B      build/static/js/runtime-main.8b1ec68b.js
  326 B      build/static/css/main.af0c7fcc.chunk.css

After:

  596.68 KB (-72.98 KB)  build/static/js/2.98ac1f77.chunk.js
  143.01 KB (-10.36 KB)  build/static/js/main.0f2746db.chunk.js
  72.93 KB               build/static/js/3.a76ca228.chunk.js
  32.28 KB               build/922792c33f2e681c1472.worker.js
  31.38 KB (-2.54 KB)    build/static/css/2.bc62a557.chunk.css
  14.61 KB               build/static/js/4.cacb1563.chunk.js
  2.93 KB                build/static/css/3.4439d99d.chunk.css
  1.48 KB (+747 B)       build/static/js/runtime-main.efbdbfc2.js
  326 B                  build/static/css/main.af0c7fcc.chunk.css

This isn't anything earth-shattering right now, but as we add more features and complexity, it would be good to have good hygiene and make use some of these cool lazy-loading features to keep bundle size manageable.

Test Plan

Buildkite, sanity check Dagit by navigating to pipeline playground. Verify that everything loads as expected, and that the new bundles are loaded lazily.

Diff Detail

Repository
R1 dagster
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.

Event Timeline

dish requested review of this revision.Jan 20 2021, 10:18 PM

Isn't Suspense still in experimental?

On https://reactjs.org/docs/code-splitting.html it is listed as the suggested approach for code splitting.

I think using it for data fetching is still considered experimental, but from what I can tell, it's already safe to use for code splitting. (https://reactjs.org/blog/2018/11/27/react-16-roadmap.html#react-166-shipped-the-one-with-suspense-for-code-splitting)

This revision is now accepted and ready to land.Jan 21 2021, 5:23 PM

Remove extra React.Suspense I forgot to remove

This revision was automatically updated to reflect the committed changes.