search

dequelabs / react-axe

[DEPRECATED] Accessibility auditing for React.js applications
Other
1.16k stars 45 forks source link

Set sideEffects to help dead code elimination? #114

Closed FezVrasta closed 5 years ago

FezVrasta commented 5 years ago

Given this ES modules code:

import React from 'react';
import ReactDOM from 'react-dom';
import axe from 'react-axe';

if (process.env.NODE_ENV !== 'production') {
  axe(React, ReactDOM, 1000);
}

ReactDOM.render(<div />, document.querySelector('#root'));

If the app is built in production mode, the react-axe package will not get stripped out from the bundle.

If this package defined sideEffects: false in its package.json, it would help webpack and Terser to dead code eliminate it.

This is needed in projects that don't make use of RequireJS imports, but only use standard ES modules imports.

WilcoFiers commented 5 years ago

We recommend using dynamic import() as a way to avoid using CommonJS. Although since CommonJS is supported everywhere you can use sideEffects, we recommend using require, instead of importing a module and having a bundler tree-shake it out.

FezVrasta commented 5 years ago

I'm sorry you decided to dismiss this issue so quickly.

For anyone interested in a solution to this problem, I published react-axe-es on npm, which is a thin wrapper around react-axe, with the sideEffects flag set.

https://www.npmjs.com/package/react-axe-es

I also published a list of not suitable approaches with related explanation of why they are not a good solution to the problem, just in case the maintainers of this library ever decide to revisit their decision.