时间戳

首页 > 解决方案 > Webpack 5 DependOn 仅在条目仅依赖于一个依赖项时才有效

reactjs - Webpack 5 DependOn 仅在条目仅依赖于一个依赖项时才有效

问题描述

为了给您一些背景信息，我正在开发一个 .NET 核心应用程序，并且在其中一个 cshtml 中我正在注入一个这样的反应迷你应用程序：

<div id="workshop" data-id=@Model></div>

<script src="~/bundles/js/workshop-bundle.js"></script>

它运行良好，但是当我使用 webpack 编译时，workshop 包太大（800kb）并且我收到了警告。Workshop-bundle 包含一些依赖项，例如 axios、highcharts-react-official 和 highcharts/highmaps。所以我试图拆分捆绑包。

在 webpack.config.js 上，我试图在其中一个条目中使用 DependOn。在这种情况下，workshop 依赖 axios、highcharts-react-official 和 highcharts/highmaps，所以基于 webpack doc 我尝试了这个：

webpack.config.js

entry: {
    workshop: {
      import: "./wwwroot/component/WorkshopApp.tsx",
      dependOn: ["axios", "highmaps", "highchartreact"],
    },
    highchartreact: "highcharts-react-official",
    highmaps: "highcharts/highmaps",
    axios: "axios",
  },

.cshtml：

<div id="workshop" data-id=@Model></div>
<script src="~/bundles/js/axios-bundle.js"></script>
<script src="~/bundles/js/highchartreact-bundle.js"></script>
<script src="~/bundles/js/highmaps-bundle.js"></script>
<script src="~/bundles/js/workshop-bundle.js"></script>

它生成 4 个捆绑包，但未显示该应用程序，并且我没有收到任何错误。

但是，如果我将依赖项放在一个条目中，则效果很好：

webpack.config.js

entry: {
    workshop: {
      import: "./wwwroot/component/WorkshopApp.tsx",
      dependOn: ["workshopVendor"],
    },
    workshopVendor: [
      "axios",
      "highcharts-react-official",
      "highcharts/highmaps",
    ],
  },

.cshtml：

<div id="workshop" data-id=@Model></div>
<script src="~/bundles/js/workshopVendor-bundle.js"></script>
<script src="~/bundles/js/workshop-bundle.js"></script>

这不是一个解决方案，因为我想要单独的包中的依赖项，知道吗？提前致谢！

标签： reactjscode-splittingwebpack-5

解决方案

不再建议将供应商捆绑包定义为单独的入口点。我认为您遇到了一些依赖关系图错误。Webpack 应该能够使用optimization.splitChunks. 像这样的东西应该工作：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        axios: {
          test: /[\\/]node_modules[\\/]axios[\\/]/,
          name: 'axios',
          chunks: 'all',
        },
       'highcharts-react-official': {
          test: /[\\/]node_modules[\\/]highcharts-react-official[\\/]/,
          name: 'highcharts-react-official',
          chunks: 'all',
        },
       'highcharts/highmaps': {
          test: /[\\/]node_modules[\\/]highcharts[\\/]highmaps[\\/]/,
          name: 'highcharts/highmaps',
          chunks: 'all',
        },
      },
    },
  },
};

根据文档：

提示

在 webpack 版本 < 4 中，通常将供应商添加为单独的入口点，以将其编译为单独的文件（与 CommonsChunkPlugin 结合使用）。

在 webpack 4 中不鼓励这样做。相反， optimization.splitChunks 选项负责分离供应商和应用程序模块并创建一个单独的文件。不要为供应商或其他不是执行起点的东西创建条目。

推荐阅读