FortAwesome / react-fontawesome

Font Awesome React component
https://fontawesome.com
MIT License
3.69k stars 265 forks source link

Increased build time from ~15s to ~5min #191

Open pierreferry opened 6 years ago

pierreferry commented 6 years ago

Hi, with my current webpack/babel config, adding this library drastically increased my build time from production ( The development time is fine. ).

I'm using webpack 4.20.2 with babel 7.1.2

dwelle commented 6 years ago

Similar for me. I noticed it happens mainly for @fortawesome/free-solid-svg-icons package. One such import adds ~25s to build time, while @fortawesome/free-regular-svg-icons adds only ~3s.

Webpack 4.20.2

There's a section in docs about it.

Using terser-webpack-plugin as minimizer should do the trick:

npm i -D terser-webpack-plugin

webpack.config.js:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  //...
  optimization: {
    minimizer: [new TerserPlugin()]
  }
};
pierreferry commented 6 years ago

Thanks for the tip ! I ended up using react-icons@2.2.7 which solved building time issues for me.

dwelle commented 6 years ago

Problem with react-icons is they don't support tree shaking, yet :(

robmadole commented 6 years ago

The issue is most likely an UglifyJS bug. Check out https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking we have more information there.

dwelle commented 6 years ago

The issue is most likely an UglifyJS bug. Check out fontawesome.com/how-to-use/with-the-api/other/tree-shaking we have more information there.

I meant react-isons. FontAwesome tree shaking works fine.