Webpack build/serve compressed bundle files

[PeterBreen]

We use webpack to create three js bundle files on build:

• runtime.bundle.js
• main.bundle.js
• vendors.bundle.js

See PR #346 for context.

These are served via straight hyperlinks on the one html file which django serves and react uses as a base for everything else: https://github.com/DemocracyLab/CivicTechExchange/blob/7d28862876c0142e0dc0f8957fd44b76b3a1b7eb/civictechprojects/templates/new_index.html#L16-L18

However, we are not (apparently?) using gzip or brotli or any compression. According to heroku, that's our app's responsibility and we're getting rightly knocked in Lighthouse reporting for not doing this.

Therefore: in order to reduce initial load time and transfer, we should offer compressed bundles. Gzip, at minimum. Webpack should be able to build them as part of npm run build though there are plenty of other options. Then, we need to offer the compressed version to any browser requesting it with the uncompressed bundles as fallback options. Right now the app doesn't appear to care if an http request has Accept-Encoding: because we don't have any encoded bundles to offer and don't have a way to send them since the hrefs are just hrefs.

As you can see in the lighthouse report I posted our compiled sass styles.css file is also something we can offer this way and I'd like to see that too, but the bundles are a higher priority.

To sum up,

• generate compressed bundle files in some form or another for us to use
• serve these if the http request has the appropriate accept-encoding header
• serve uncompressed bundles as fallback if needed
• don't break anything ;)

We probably don't need to generate compressed bundles with the dev build script -- that doesn't get used on production -- but build should do all this. I also may not be describing this very well - so there may be some research needed before implementation if I'm missing something in this ticket.

[QuanGiap]

From my research, we can use compression-webpack-plugin to compress the bundle files with Gzip.

[ddfridley]

@abnud1 Hi, I'm helping with development focus for DemocarcyLab. We've created a DemocracyLab Dashboard and would like to update the status of this issue.

There seems to be an outstanding question in the PR #1029

Just so I'm clear - would this require changing how we serve files on production (needing gunicorn instead of django's runserver) as well, or is that a dev environment specific change?

Are you still working on it? If so, what are the next steps, or what challenges are there to moving forward? Or is this still an issue/should we close it? Or, if you just aren't available to work on it anymore, please let me know, and/or unassign yourself Or something else?

Thanks!