0

我正在开发一个具有多条路线的单页应用程序，这些路线中的一小部分将小部件绘制到屏幕上。每个路由都有一个延迟加载的 React 组件，负责绘制内容。

我正在使用的小部件 npm 包非常大，所以我不想将它捆绑在主应用程序中，但我也不想将它包含在每个需要它的路由的动态包中。

为此，在 Webpack 1.x 中，我能够为我的路由执行以下操作：

function loadComponentForRouteA() {
  return function (location, callback) {
    require.ensure([], (require) => {
      require('widget-package');

      require.ensure([], (require) => {
        callback(null, require('path/To/Route/Component/A'));
      }, "nameOfRouteBundleA");

    }, "nameOfWidgetPackageBundle");
  }
}

function loadComponentForRouteB() {
  return function (location, callback) {
    require.ensure([], (require) => {
      require('widget-package');

      require.ensure([], (require) => {
        callback(null, require('path/To/Route/Component/B'));
      }, "nameOfRouteBundleB");

    }, "nameOfWidgetPackageBundle");
  }
}

这会很好地生成 3 个 webpack 包文件：

  • nameOfWidgetPackageBundle.js
  • nameOfRouteBundleA.js
  • nameOfRouteBundleB.js

然后当我在应用程序中点击 /route/A 时，它会依次加载两个 js 文件：nameOfWidgetPackageBundle.js 和 nameOfRouteBundleA.js

然后，如果我随后导航到 /routeB，它会依次加载两个 js 文件：nameOfWidgetPackageBundle.js，然后是 nameOfRouteBundleA.js，但至关重要的是，nameOfWidgetPackageBundle.js 将从浏览器缓存中获取...

更改为 Webpack 2.x 语法后，我的路由有以下内容：

function loadComponentForRouteA() {
  System.import('widget-package')
    .then(widgetPackage => {
      System.import('path/To/Route/Component/A')
        .then(Component => {
          callback(null, Component);
        });
    });
}

function loadComponentForRouteB() {
  System.import('widget-package')
    .then(widgetPackage => {
      System.import('path/To/Route/Component/B')
        .then(Component => {
          callback(null, Component);
        });
    });
}

这会生成几个块文件（令人讨厌的是，Webpack 2 中的 System.import 不再允许您命名块文件，但出于示例的目的，我将使用与 Webpack 1 中的 require.ensure 相同的包命名样式）：

  • nameOfWidgetPackageBundleA.js
  • nameOfWidgetPackageBundleB.js
  • nameOfRouteBundleA.js
  • nameOfRouteBundleB.js

所以基本上为小部件包创建了重复的包。这两个文件具有相同的文件大小和几乎相同的内容，但是在不同的路径之间导航现在需要在每次使用时重新下载小部件包。

我的问题是，有没有人知道强制 Webpack 2 System.import 表现得更像 Webpack 1 的 require.ensure 并且不生成重复包的方法？

编辑 - 我尝试使用以下 webpack 插件来解决问题：

new CommonsChunkPlugin({ name: 'widget-package', async: true, children: true, minChunks: 1}) （添加了 widget-package 作为条目）

新的 DedupePlugin()

新的 webpack.optimize.AggressiveMergingPlugin({ minSizeReduce: 1.5, moveToParents: false, entryChunkMultiplicator: 10 })

其中唯一有效的是 AggressiveMergingPlugin。它解决了重复的小部件包包问题，但也合并了我所有的动态包，这违背了整个目的，因为现在只有一个动态包......

4

0 回答 0