如何防止webpack重写import()以便使用buildIn one？

Webpack 的 import() 函数用于实现动态导入模块，这是一种代码分割（code splitting）的技术，可以提高应用的加载性能。import() 函数返回一个 Promise，该 Promise 解析为一个包含模块导出的对象。

Webpack 的 buildIn one 功能是指将多个模块打包成一个单独的文件，以减少 HTTP 请求的数量。然而，有时候我们可能不希望 Webpack 重写 import() 调用，以便使用 buildIn one 功能。这可能是因为我们需要在运行时动态地加载模块，而不是在构建时静态地确定它们。

要防止 Webpack 重写 import() 调用，可以使用以下方法：

使用 /* webpackIgnore: true */ 注释

在 import() 调用前添加 /* webpackIgnore: true */ 注释，可以告诉 Webpack 忽略这个特定的动态导入。

// webpackIgnore: true
import('./path/to/module.js').then(module => {
  // 使用模块
});

这样，Webpack 将不会对这个 import() 调用进行代码分割或重写。

使用 magic comments

Webpack 支持一种称为 "magic comments" 的特殊注释，可以用来控制动态导入的行为。例如，使用 /* webpackChunkName: "my-chunk-name" */ 可以为动态导入的模块指定一个自定义的 chunk 名称。

如果你想要防止 Webpack 将某个动态导入合并到 buildIn one 中，可以尝试不使用任何 magic comments，或者明确指定一个不会被合并的 chunk 名称。

import(/* webpackChunkName: "unique-chunk-name" */ './path/to/module.js').then(module => {
  // 使用模块
});

配置 optimization.splitChunks

在 Webpack 配置文件中，可以通过调整 optimization.splitChunks 设置来控制代码分割的行为。例如，可以设置 maxSize 属性来限制单个 chunk 的大小，或者设置 cacheGroups 来定义哪些模块应该被包含在同一个 chunk 中。

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      maxSize: 200000, // 设置 chunk 的最大大小为 200KB
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

注意事项

• 使用 /* webpackIgnore: true */ 注释时，Webpack 将不会对这个模块进行任何优化，包括代码分割和 tree shaking。
• 在使用 magic comments 时，确保指定的 chunk 名称是唯一的，以避免与其他模块冲突。
• 调整 optimization.splitChunks 设置时，需要根据项目的具体需求进行权衡，以确保既能优化加载性能，又能满足动态导入的需求。

通过上述方法，你可以有效地控制 Webpack 对 import() 调用的处理方式，从而在需要时防止其重写以便使用 buildIn one 功能。