qri-io / 2017-frontend

qri electron & web frontend
https://qri.io
MIT License
23 stars 7 forks source link

refactor(readonly): use webpack to bundle split and React.lazy to code split for readonly mode #474

Closed ramfox closed 5 years ago

ramfox commented 5 years ago

This PR does a few things:

1) Uses webpack to bundle split the webapp, for readonly and normal mode. Moves the dependencies into their own chunk! Note: this does not effect the Electron version of the app. EDIT: this feature has been pushed back a release cycle see this comment

2) Creates 2 new webpack files, a readonly prod and readonly dev file, that includes a new build variable READONLY. During build, it switches on READONLY before importing certain sections of the codebase. Specifically, the readonly webapp does not include the editor (and therefore Monaco), or the body (and therefore HandsonTable). These are two large dependencies. Without them our webapp bundle size drops dramatically, from 10MB to a total of 4MB.

3) It uses React.lazy and React.Suspense, to code split on the Editor and the Body. (this is a natural side effect of implementing #2, but code splitting has been something we've been talking about implementing.) It also serves as an example for us in the future of how to use lazy and Suspense, as those features get more robust as React develops.

4) Fixes a few styling bugs! Specifically on AppLoading and TopBar.

5) adjusts linting settings in packages.json so that dynamic importing doesn't error

6) updates deps!

b5 commented 5 years ago

Ok, I complied & ran this in both readonly mode, and couldn't get it to work with qri connect, then I realized we talked about adding a vendored file to our webpack output. our webapp template needs to be updated to also request vendors~main.js.

This means we need to ship a qri release before we can ship any webapp upgrades that write vendored deps to a separate file. So we have two options:

  1. wait until
  2. adjust this PR to not vendor our deps & ship a frontend version now
    • in the next backend release we can add a ref to /webapp/vendors~main.js that will silently fail (because the file won't exist), but will work once we ship an update that does vendor.

All of this is also going to apply to the electron app, which I haven't looked at yet. It'll be more of a mess, but that mess will be contained to the frontend repo and it's own webpack file.


Testing Process

Some quick notes on my testing process: I was using this qri_build command to build & add to IPFS in one step:

qri_build webapp --frontend ~/dev/qri/frontend --readonly --ipfs

That script's last lines log the output hash, which I copy-paste & run

$ qri config set webapp.entrypointupdateaddress ""
$ qri config set webapp.entrypointhash /ipfs/[whatever qri_build printed]
$ qri connect

then open localhost:2505 in a browser, open console, hit refresh, think.