Webpack如何实现代码分割

Webpack 实现代码分割（Code Splitting）的方法主要有两种：使用动态导入（Dynamic Imports）和使用 SplitChunksPlugin 插件。

1. 使用动态导入（Dynamic Imports）：

动态导入允许你将某个模块单独打包成一个 chunk，然后在需要的时候按需加载。这样可以减少首次加载页面时需要下载的代码量，提高应用性能。要实现动态导入，你需要使用 import() 语法。

例如，假设你有一个名为 myModule.js 的模块，你可以这样动态导入它：

// 使用动态导入将 myModule.js 分割成一个单独的 chunk
import('./myModule.js').then(module => {
  // 使用 module
});

Webpack 会自动识别这种动态导入的语法，并将 myModule.js 分割成一个单独的 chunk。

2. 使用 SplitChunksPlugin 插件：

SplitChunksPlugin 是 Webpack 中的一个内置插件，用于将公共代码（例如第三方库、公共组件等）分割成单独的 chunk，以便浏览器缓存和重复使用。要启用 SplitChunksPlugin，你只需在 webpack.config.js 文件中配置相关选项即可。

以下是一个简单的配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all', // 可选值有 'async' 和 'initial'，表示分割哪些类型的代码
      minSize: 30000, // 生成 chunk 的最小体积（以字节为单位）
      maxSize: 0, // 生成 chunk 的最大体积（以字节为单位）
      minChunks: 1, // 模块被引用的最小次数
      maxAsyncRequests: 6, // 按需加载时的最大并行请求数
      maxInitialRequests: 4, // 入口点的最大并行请求数
      automaticNameDelimiter: '~', // 生成 chunk 名称的分隔符
      name: true, // 是否根据模块和缓存组生成自定义名称，默认为 false
      cacheGroups: { // 定义缓存组，用于控制代码分割的细节
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 中的模块
          priority: -10 // 设置优先级
        },
        default: {
          minChunks: 2, // 非 node_modules 模块的最小引用次数
          priority: -20, // 设置优先级
          reuseExistingChunk: true // 如果当前 chunk 已经存在，则复用它，而不是创建一个新的 chunk
        }
      }
    }
  }
};

通过以上配置，Webpack 会自动将 node_modules 中的模块和其他公共代码分割成单独的 chunk。你可以根据项目需求调整这些配置选项，以实现更精细的代码分割。