Search code examples
reactjsbundlewebpack-4code-splitting

How to code split packages (fontawesome) from Webpack 4 React project

I have a large bundle that needs to be split into several chunks to get below the 2MB PWA restriction. From the BundleAnalyzerPlugin I can see that I would benefit from trying to split out lodash, fontawsome and moment into separate chunks/bundle files.
BundleAnalyzerPlugin

I have tried to use the import() splitting technique described here but can't see how to make it work for Fontawesome.

The below example does not work, since it still leaves fontawesome in the bundle and only loads icons when interacted with. 

import { faBell, faEyeSlash, faEye} from '@fortawesome/free-solid-svg-icons';
import { faBell as regularBell} from '@fortawesome/free-regular-svg-icons';
import('@fortawesome/fontawesome-svg-core').then(fontawesome => {
  fontawesome.library.add(
    faBell, faEye, faEyeSlash, regularBell
  )
})

What is the correct technique for separating packages such as lodash, fontawesome and moment into separate bundles?

Kind regards /K

Solution

  • I don't know what exactly are you trying to come up with but i'm assuming you want a lower bundle size then I did a research for you:

    If you really want to push your bundle size to the lowest then look for gzip compression

    https://webpack.js.org/plugins/compression-webpack-plugin/

    A little bit research would lead you to this: https://webpack.js.org/guides/code-splitting/

    What is the correct technique for separating packages such as lodash, fontawesome and moment into separate bundles?

    For lodash:

    // You should be using:
import isEmpty from 'lodash/isEmpty'

// instead of:
import _ from 'lodash';
import { isEmpty } from 'lodash';

    read: https://www.blazemeter.com/blog/the-correct-way-to-import-lodash-libraries-a-benchmark/

    For moment: https://medium.com/@Memija/less-is-more-with-moment-and-moment-timezone-d7afbab34df3

    For fontawesome: I don't know exactly is this?

    The below example does not work, since it still leaves fontawesome in the bundle and only loads icons when interacted with.

    Yes, it'll be included to the bundle of course depending on what you've stated in your config? What you did is from the docs itself: https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking