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 packing 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 through the optimization.splitChunks object literal in the configuration file (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 approaches to 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 until necessary, only retrieving the relevant files from the server when they are used. 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 adds a hash to each chunk based on the configured filename during output, reasonably splitting modules that do not change, allowing files to be cached longer on the client side, and the cache remains effective across 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 further improves the utilization of network resources.
Extracting common parts from several chunks to avoid duplicate injection of modules.

Practice#

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

1. CDN Import
//webpack.config.js

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

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

2. Configuring Cache Groups
modules.exports={
  optimization.splitChunks: {
    chunks: "all",
    cacheGroups: {
      // In the final optimization phase, unused lodash methods will be removed, resulting in less code to load compared to CDN imports
	  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 packs 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);
}