This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money

This article mainly introduces Code Splitting, which uses SplitChunksPlugin plug-in to package third-party libraries or common basic components separately, make reasonable use of cache, load on demand or in parallel, and improve the speed of first-screen loading

Series of articles:

  • The front-end performance is optimized for combat from 30s to 2s: Optimize from the general direction, mainly for plug-insAccording to the need to introduce, plusGzip compressionconfiguration
  • Image optimization for front-end performance optimization reduced image resources by approximately 57%: Start with details, mainly introduceImage optimization

This article followed the previous configuration, optimization of the same system, or from the details of optimization, mainly introduced code segmentation.

preface

Code Splitting is one of the most powerful features of Webpack. Code Splitting can split Code into bundles and then load these bundles on demand or in parallel, which can improve the first-screen loading speed.

The webPack version I use is V4.28.4, and SplitChunksPlugin is used for code splitting. The use of this plug-in is really flexible, and it is really hard to find the best practice, so you need to explore it by yourself

Tips: The following bundle sizes are the size before compression, and the code in the production environment passesgzipAfter that, it will decrease by about 75%

Pre-optimization analysis

See the project Package Build -> Analyzer analysis in the first article for details

As can be seen from the following figure, the entry file package is still quite large, and the recommended size of the package tip is 244KB, so there is a long way to go to optimize it

  • The total package size is6.57 MB
  • The entry file size is3.16 MB: main.js(3.1MB) + main.css(57.3KB) + Runtime.js (4.41KB)
  • The main size is js for3.1 MB: main_modules(1.24MB) + UI (871.91KB) + node_modules (906.61KB)

First optimization

The main idea is to package third-party libraries or common infrastructure components separately. These changes are less, and packaging separately is better for caching.

/ / modify webpack. Config. Js
module.exports = {
  optimization: {
    namedModules: true.namedChunks: true.runtimeChunk: {
      name: "runtime",},splitChunks: {
      chunks: "all".// all, async and initial
      minSize: 20000.// Generates the minimum chunk size
      minChunks: 1.// The minimum number of chunks that must be shared before splitting
      maxAsyncRequests: 5.// Maximum number of parallel requests when loading on demand
      maxInitialRequests: Infinity.// The maximum number of parallel requests at the entry point
      automaticNameDelimiter: "~".// Specify the delimiter used to generate the name
      cacheGroups: {
        default: false.vendors: {
          name: "chunk-vendor".chunks: "all".minChunks: 2.test: /[\\/]node_modules[\\/]/,
          priority: -20,},commons: {
          name: `chunk-common`.chunks: "all".minChunks: 2.// The value of priority must be larger than the vendors in order to be extracted
          priority: -10,},},},},};Copy the code

Analysis results: the total package size is 4.79MB(1.16MB after compression), reduced by 1.78MB(1823KB); The entry file is still 3.16MB, unchanged; The chunk – common to 726 KB

Second optimization

Basically, ant Design Vue is packaged separately

/ / modify webpack. Config. Js
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        // omit other......
        ant_design: {
          chunks: "all".name: `ant_design`.test: /[\\/]ant-design-vue[\\/]/,
          priority: 0,},},},},};Copy the code

Analysis result: Although the entry file is increased by 72 KB, main.js is split into two files that can be loaded in parallel

  • The total package size is 4.85MB. Compared with the first optimization,Increased 0.06 MB (61 KB);
  • The entry file is 3.23MB,Add 0.07 MB (72 KB): main.js(1.86MB, 533KB compressed),ant_design.js(1.31MB, 276KB compressed)

Third optimization

Pack the Ant Design Icon separately

/ / modify webpack. Config. Js
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        // omit other......
        ant_design_icons: {
          chunks: "all".name: `ant_design_icon`.test: /[\\/]@ant-design[\\/]/,
          priority: 0,},},},},};Copy the code

Analysis results: The total package size is still 4.85MB, and the import file size is 3.23MB. So there is no need to extract it separately, but increase the number of requests, and ultimately the second package configuration prevails

Of course, I am not particularly proficient in this code segmentation, but also do some shallow attempt, welcome big brothers to speak, give advice, help me optimize, thank you!!

Of course, I am not particularly proficient in this code segmentation, but also do some shallow attempt, welcome big brothers to speak, give advice, help me optimize, thank you!!

Reference Documents:

  • SplitChunksPlugin | webpack Chinese documents
  • SplitChunks for Webpack