search

raunofreiberg / axe-mode

Accessibility testing visualized
MIT License
194 stars 5 forks source link

feat: asynchronously import axe-core #13

Closed raunofreiberg closed 4 years ago

raunofreiberg commented 4 years ago

Closes #9

Benchmarks

I used the default CRA template and wrapped the application as:

<AxeMode disabled={process.env.NODE_ENV !== 'development'}>

And everything related to axe-mode was put into a separate chunk, and dropped in production 🎉:

image

chaance commented 4 years ago

@raunofreiberg Check out my latest commits and let me know what you think. GitHub won't diff correctly because I renamed the implementation file, but all I changed there was using a standard sync import for axe-core and lazy loading our implementation in index.ts.

chaance commented 4 years ago

BTW, had some issues with the build and it looks like TSDX doesn't handle lazy loading at the moment. I updated the config but now we're not getting CJS bundles. This needs some work but we can probably open another PR for that.

raunofreiberg commented 4 years ago

@chancestrickland Great work!

I modified the entry point a bit. It did not seem to work otherwise with a production build.

The entry point has to be a component that checks for NODE_ENV since there needs to be a React.Suspense around the lazy-loaded component.

I tested it out on the examples and a CRA template and the whole implementation of our module is split into a separate chunk in the build, and not requested at all in production!

Lemme know if this makes sense!