KNOWN GitHub

Webpack Optimization

We always want to split our code, makes it light ans stable enough for Browser to load and cache.

With default webpack configuration, all js code will be bundled into 1 single file, which usually will be >=4 MB.

How could we change adn optimized it then?

1. Use splitChunks

If you know your depending modules:

{
  mode: 'production',
  /** optimization for chunks */
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        react: {
          test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
          name: 'react',
          chunks: 'all',
        },
        react_assist: {
          test: /[\\/]node_modules[\\/](react-toastify|react-paginate|react-dropzone)[\\/]/,
          name: 'react_assist',
          chunks: 'all',
        },
        css_bootstrap: {
          test: /[\\/]node_modules[\\/](bootstrap|reactstrap|@fortawesome\/fontawesome-free)[\\/]/,
          name: 'css_bootstrap',
          chunks: 'all',
        },
        tools: {
          test: /[\\/]node_modules[\\/](axios|moment)[\\/]/,
          name: 'tools',
          chunks: 'all',
        },
      }
    }
  }
}

Let's compare the file size and how browser can handle this.

Before optimization:

After optimization:

Period Before After
Resource 9.5M 2.4M
Finish 1.22s 662ms

2. Use React Lazy and Suspense

Only for example.




Comments !

About the blog

Some notes at work and life to share

Brian Shen