New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add React-Loadable and analyze webpack #1736

Merged
merged 5 commits into from Apr 10, 2018

Conversation

Projects
None yet
3 participants
@jseppi
Contributor

jseppi commented Apr 9, 2018

ref #1724.

This PR adds support for using react-loadable, and uses that code to make the Data Explorer's OptionalFilters "loadable" as a new higher-order component called LoadableOptionalFilters. It also adds webpack-bundle-analyzer and an npm script for visualizing our bundle sizes.

react-loadable makes it pretty easy to generate webpack chunks/bundles based that are split at the component-level. Then, those chunks can be loaded asynchronously instead of having to everything in a single bundle. In practice, this means the initial load of the Data Explorer app will be faster (due to a smaller initial bundle size).

Unfortunately webpack-bundle-analyzer seems to have a problem with analyzing the fully-transformed chunks that are generated by React-Loadable and import (ref webpack-contrib/webpack-bundle-analyzer#166) so we can only see the stat size of our bundle modules. The stat size, while not what actually will get transmitted to a client over the wire, appears to at least be representative of the relative size of modules to each other, so it should still help identify large modules/dependencies.

@jseppi jseppi self-assigned this Apr 9, 2018

@jseppi jseppi changed the title from [WIP] Add React-Loadable and analyze webpack to Add React-Loadable and analyze webpack Apr 10, 2018

@jseppi jseppi requested review from toolness and hbillings Apr 10, 2018

@jseppi

This comment has been minimized.

Contributor

jseppi commented Apr 10, 2018

hrm, our selenium tests failed in the last CircleCI build. Hoping a restart will correct.

@jseppi jseppi force-pushed the 1724-analyze-webpack branch 3 times, most recently from 2e383ce to 69c8b6c Apr 10, 2018

@@ -1,5 +1,6 @@
{
"extends": "airbnb",
"parser": "babel-eslint",

This comment has been minimized.

@jseppi

jseppi Apr 10, 2018

Contributor

required so that eslint doesn't barf on not-yet-implemented syntax (like import) that gets transpiled by babel.

"presets": ["env", "react"]
"presets": ["env", "react"],
"plugins": [
"syntax-dynamic-import"

This comment has been minimized.

@jseppi
export const Loading = ({ error, pastDelay }) => {
if (error) {
return (
<div className="usa-alert usa-alert-error" role="alert">

This comment has been minimized.

@jseppi

jseppi Apr 10, 2018

Contributor

This looks maybe a little weird, but I was unsure of what would be better, and didn't really want to introduce additional styling rules. This error case should never happen.

This comment has been minimized.

@hbillings

hbillings Apr 10, 2018

Member

Does this wrap around the entire Loadable container, or each filter? If the former, I think it's fine; if the latter, we have some form error classes we could apply that would probably look less weird.

@jseppi

This comment has been minimized.

Contributor

jseppi commented Apr 10, 2018

I'm at a loss for why the selenium tests are failing on CircleCI. They all pass locally.

@jseppi

This comment has been minimized.

Contributor

jseppi commented Apr 10, 2018

Welp, they passed after the last build re-trigger 🎉!

@hbillings

🤹‍♂️

To run all the tests, run:
```
```sh
yarn test

This comment has been minimized.

@hbillings

hbillings Apr 10, 2018

Member

Is there a way to run this from Docker, also?

This comment has been minimized.

@jseppi

jseppi Apr 10, 2018

Contributor

oh, yeah, all commands can be prefixed with docker-compose run app. It's a little cumbersome to keep up with two ways of doing everything. I think we should standardize on the docker-compose way, personally.

This comment has been minimized.

@hbillings

hbillings Apr 10, 2018

Member

Agreed, especially since none of us are running it the vanilla way.

This comment has been minimized.

@jseppi

jseppi Apr 10, 2018

Contributor

Filed an issue: #1743

This comment has been minimized.

@hbillings
yarn analyze-webpack
```
Then visit http://localhost:8888 to explore the modules that comprise each bundle.

This comment has been minimized.

@hbillings

hbillings Apr 10, 2018

Member

💯 on the correct use of comprise!

This comment has been minimized.

@jseppi

jseppi Apr 10, 2018

Contributor

🤓

This comment has been minimized.

@ericronne

ericronne Apr 10, 2018

Contributor

which comprise, perhaps? 🤓

export const Loading = ({ error, pastDelay }) => {
if (error) {
return (
<div className="usa-alert usa-alert-error" role="alert">

This comment has been minimized.

@hbillings

hbillings Apr 10, 2018

Member

Does this wrap around the entire Loadable container, or each filter? If the former, I think it's fine; if the latter, we have some form error classes we could apply that would probably look less weird.

@jseppi

This comment has been minimized.

Contributor

jseppi commented Apr 10, 2018

@hbillings: For whatever reason I can't comment on your question about the error message. It looks like this:

screen shot 2018-04-10 at 9 03 21 am

James Seppi added some commits Apr 6, 2018

James Seppi
attempt to analyze webpack bundle
unfortunately the analyzer plugin is only showing the `stats` size of the bundles, which does not take into account minification.
James Seppi
move stats.json to bundle output dir
and run analyzer from cli instead of from gulp:

```
webpack-bundle-analyzer ./frontend/static/frontend/built/js/stats.json
```
James Seppi
finish LoadableWrapper and add tests
Also document the webpack-bundle-analyzer workflow for visualizing the data explorer bundles.

@jseppi jseppi force-pushed the 1724-analyze-webpack branch from 69c8b6c to 7306e05 Apr 10, 2018

@jseppi jseppi merged commit bd409ef into develop Apr 10, 2018

3 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
codeclimate All good!
Details
codeclimate/total-coverage 92% (0.0% change)
Details

@jseppi jseppi deleted the 1724-analyze-webpack branch Apr 10, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment