Recently, I have been studying webpack optimization. I have seen the configuration of optimization. SplitChunks to splitChunks, and I have studied the function of asynchronous and synchronous chunks to split code and prefetch and preload. VUE framework is used in the project. I also looked at @vue/ CLI-service’s default configuration of Webpack and optimization of prefetch and preload. Prefetch and preload do not work. Finally accidentally realized, the original is….

Let’s take a look at how WebPack implements code splitting:

  1. Multi-entry segmentation: Entry
  2. To prevent duplication, use Entry Dependencies or SplitChunksPlugin to delete and separate chunks.
  3. Dynamic imports: Use es Module’s import method and WePack’s exclusive require.Ensure

I’m mainly looking at SplitChunksPlugin

Since webpack4 and 5 have different default configurations for optimization.splitchunks, let’s look at webpack5 first:

module.exports = { //... Optimization: {splitChunks: {chunks: 'async',// specify the type of chunks to be split, async: async,inital: synchronous,all: all minSize: 20000,// Minimum file size, unit bite; That is, it may be segmented if it exceeds minSize; MinRemainingSize: 0,// Webpack5 new property to prevent chunks with size 0 maxSize: 0, minChunks: 1, maxAsyncRequests: EnforceSizeThreshold: 50000, cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, priority: -10, reuseExistingChunk: true }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } } } };Copy the code

In particular, we look at cacheGroups, which have two chunks cacheGroups, one for chunks under node_modules and one for chunks shared.

Assuming that we have asynchronous chunks that are split, how can we use prefetch and preload to optimize the load time of the page? That’s where the prefetch/preload module comes in.

支那

Post webPack’s official description of prefetch/preload modules:

支那

Webpack V4.6.0 + adds support for prefetching and preloading. When declaring an import, use the following built-in directives to have WebPack print a "resource hint "that tells the browser: Prefetch: resources that may be needed in some future navigationCopy the code

Here’s how to use resource hints to hint the browser. Some call these “magic modifiers 😂”

/ /... import(/* webpackPrefetch: true */ './path/to/LoginModal.js'); / /... import(/* webpackPreload: true */ 'ChartingLibrary');Copy the code

Q: Why do we not use resource hints in the VUE framework, but WebPack still generates pre-loaded and pre-fetched Link tags?

A: Because the Vue CLI also automatically injects resource hints (preload/prefetch, manifest, and icon links (when using the PWA plug-in) as well as resource links to JavaScript and CSS files handled during the build process.

@vue/cli-service introduced @vue/preload-webpack-plugin. By default, a Vue CLI application automatically generates preload prompts for all files required for initial rendering. These hints are injected by @vue/preload-webpack-plugin and can be modified and removed via the config.plugin(‘preload’) of chainWebpack.

The @vue/preload-webpack-plugin plugin automatically generates preload resource hints.

Q: Some people might be like me when Prefetch loads a resource twice with the same time. What’s the reason?

One possible reason for this is that the disable:cache function is enabled when debugging using dev-tool. In this case, prefetch will request the cache again regardless of the cache. When disable:cache is disabled, the second time is reduced to a few milliseconds, as follows:

Q: Many people say their prefetch and preload don’t work

A: That could be a browser problem, because these two features are new to HTML5 and are supported differently by browser vendors, as shown below:

Summary: Webpack code split has a variety of implementation methods, about SplitChunkPlugin, you can see the official documentation, which is quite a lot of parameter configuration, try to see. There is also a matter about the use and implementation of prefetch and preload, as well as compatibility, we should have a general understanding, in order to make a better combination of the project code packaging optimization;