极简方式：以Webpack4新技能提升程序性能！

在当今快节奏的数字时代，网站和应用程序的响应速度至关重要。它是用户体验的第一要素，直接影响用户对您产品的第一印象。若加载时间过长，可能会导致用户失去耐心并转而寻找其他替代品。

提升加载速度的有效方法之一是代码分割，它可以通过将应用程序的代码拆分为更小的块来实现，从而按需加载这些块，加快初始加载速度，尤其是对于大型应用程序而言。

在本文中，我们将介绍Webpack4中代码分割的正确姿势，让您轻松掌握这项技术，在实践中熟练运用，从而大幅提升应用程序的性能。

配置Webpack

在Webpack的配置文件中，我们需要启用代码分割功能。这可以通过在optimization选项中设置splitChunks来实现。例如：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

以上配置将把代码块按以下规则进行分割：

• 将所有大于30KB的块进行分割。
• 将所有包含至少两个块的块进行分割。
• 将所有异步请求的块限制在5个以内。
• 将所有初始请求的块限制在3个以内。
• 将所有包含node_modules的块作为公共块进行提取。
• 将所有其他块作为默认块进行提取。

按需加载代码块

启用代码分割后，我们就可以按需加载代码块。这可以通过使用Webpack的require.ensure()函数来实现。例如：

require.ensure(['./path/to/chunk'], function(require) {
  var chunk = require('./path/to/chunk');
  // 使用chunk
});

当调用require.ensure()函数时，Webpack将加载并执行指定的块。如果块已经加载，则不会再次加载。

使用代码分割的好处

代码分割有很多好处，包括：

• 减少初始加载时间：通过按需加载代码块，可以减少初始加载时间，从而提高用户体验。
• 提高缓存利用率：代码块可以被缓存，因此在后续加载时可以更快地加载。
• 降低带宽消耗：通过按需加载代码块，可以降低带宽消耗，从而减少成本。
• 增强可维护性：代码分割可以使代码更易于维护，因为可以将代码拆分为更小的块，从而便于管理。

结论

代码分割是一种有效的方法，可以提高应用程序的加载速度和性能。通过使用Webpack4的代码分割功能，您可以轻松实现代码的拆分和按需加载，从而让您的应用程序表现更出色，使用体验更优！