Webpack Code Splitting Practice

What is Code Splitting#

Code Splitting is an optimization technique used to split an application's code into multiple smaller bundles, rather than packaging all the code into a single file. This technique can significantly improve the performance and loading speed of applications, especially in large applications.

Code Splitting in Webpack#

Webpack goes through multiple stages such as initialization, compilation, optimization, output, and plugin execution to output the source code as chunks. The code splitting behavior in Webpack has been a default behavior since Webpack 4, and it can be configured in the configuration file through the optimization.splitChunks object literal (https://webpack.js.org/plugins/split-chunks-plugin/).

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        // Split dependencies imported from node_modules
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        // Split common modules
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Code Splitting Strategies#

There are generally two ideas for code splitting:

Dynamic Import
Splitting large files, merging small files and common modules

Dynamic Import#

Dynamic import can also be referred to as lazy loading, where module files are not fetched unless necessary, and are only retrieved from the server when needed. The built-in import() statement in JavaScript, React's lazy method, and the out-of-the-box route lazy loading in vue-router are all implementations of dynamic loading.

Chunk Splitting and Merging#

Webpack will add a hash to each chunk based on the configured filename during output, reasonably splitting those modules that do not change, allowing files to be cached longer on the client side, and the cache will still be effective during multiple packaging deployments.
By dividing large chunks into multiple smaller chunks based on network resources, applications can be loaded more efficiently. For example, under HTTP/2, this operation will further improve the utilization of network resources.
Extracting common parts from several chunks to avoid duplicate module injection.

Practice#

Comparing CDN and Cache Groups
Importing packages via CDN is also a way to achieve long-term caching, but with the widespread use of tree-shaking, CDN has, in some sense, become a negative optimization.

1. CDN Import
//webpack.config.js

modules.exports={
  externals: {
    lodash: '_'
  }
}

//index.html
// Using externals to exclude lodash, and then loading it through a script in the template file, effectively pulls the entire lodash library directly.
<script src="bootcdn/ajax/[email protected]/lodash.min.js">

2. Configuring Cache Groups
modules.exports={
  optimization.splitChunks: {
    chunks: "all",
    cacheGroups: {
      // In the final optimization stage, unused lodash methods will be removed, resulting in less code to load compared to CDN import.
	  lodash: {
	    test: [\\/]node_modules[\\/]lodash,
	  }
    }
  }
}

However, in certain scenarios, CDN still has its place, such as when the server uses HTTP/1.1 for data transmission while relying on smaller or fully utilized dependencies.

Reasonable Splitting of Unchanging Modules
The default chunking behavior of Webpack 4 will package all dependencies imported from node_modules into a single chunk. Some frequently changing dependencies, such as internal SDKs or component libraries, can adopt the default splitting strategy, but long-term unchanging dependencies can be split using cache groups and cached in the browser for a long time.

modules.exports={
  optimization.splitChunks: {
    chunks: "all",
    cacheGroups: {
	  vue: {
	    test: [\\/]node_modules[\\/](vue|vue-router|vuex),
	  },
	  lodash: {
	    test: [\\/]node_modules[\\/]lodash
	  },
	  element: {
		test: [\\/]node_modules[\\/]element-ui
	  }
    }
  }
}

Lazy Loading
Dynamically import components using the built-in import() method in JavaScript.

export default {
  component: () => import('./A.vue'),
}

Similarly, dynamically import route components.

const router = createRouter({ 
// ... 
  routes: [ 
    { path: '/a', component: () => import('./views/A.vue') }, 
  ]
})

Some built-in lazy loading methods in frameworks, such as React's lazy.

import { useState, Suspense, lazy } from 'react';
import Loading from './Loading.js';

const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));

export default function MarkdownEditor() {
  const [showPreview, setShowPreview] = useState(false);
  const [markdown, setMarkdown] = useState('Hello, **world**!');
  return (
    <>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <label>
        <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
        Show preview
      </label>
      <hr />
      {showPreview && (
        <Suspense fallback={<Loading />}>
          <h2>Preview</h2>
          <MarkdownPreview markdown={markdown} />
        </Suspense>
      )}
    </>
  );
}

function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
}