Closed ramfox closed 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:
/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.
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.
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 onREADONLY
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!