将Webpack中使用动态导入创建的块与供应商块合并

Question

我正在使用Webpack的动态导入功能在JS项目中进行开发，从动态导入创建的代码块将产生相应的vendors~[name].chunk.js代码块。我希望将vendors代码块包含在相应的[name].chunk.js代码块内，即不要将其拆分为单独的代码块。

Webpack配置：

module.exports = {
    output: {
        // ... 
        chunkFilename: '[name].chunk.js',
    },
}

应用程序代码：

const Component = React.lazy(() =>
    import(/* webpackChunkName: "component" */ './Component')
);

生成

vendors~component.chunk.js 和 component.chunk.js

- Andy Bayer

---

我不确定我是否理解你的意思。你是说整个应用程序只有一个供应商块，而不是每个供应商都连接到每个块吗？ - tmhao2005

Answer 1

这有点复杂，因为webpack会根据项目特定的块文件大小调整输出，但通常情况下，将以下内容添加到您的webpack配置中将禁用分离的供应商块：

optimization: {
    splitChunks: {
      chunks() {
        return false;
      },
    },
  },

这意味着你目前在 vendors~component.chunk.js 中看到的内容将被包含在 component.chunk.js 中。

它的工作原理是禁用分割块行为，这在所有异步块上默认启用，即使用 import() 的组件。

请参见 https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkschunks。

- simbolo