使用 React Router 和 Webpack 2 如何仅在某些路由上需要外部库？

Question

目前工作中

使用 Webpack 2 和 React Router v4，我已经能够设置工作代码拆分。有一个中间 <AsyncComponent> 解决了承诺并返回组件（在 github 问题上找到的模式）。

下面的一组示例路线：

<Switch>
    <Route 
        path="me" 
        render={(props) => 
            <AsyncComponent promise={ require.ensure([], (require) => require('./modules/Profile'), 'profile') } props={props} />
        } 
    />
    <Route 
        path="credit-card" 
        render={(props) => 
            <AsyncComponent promise={ require.ensure([], (require) => require('./modules/CreditCard'), 'credit-card') } props={props} />
        } 
    />
</Switch>

目标

我想进一步扩展它，并且对于某些路线，加载其他库。在上面的示例中，我想在信用卡路由上仅获取 StripeJS (https://js.stripe.com/v2/) 库。

我想强调的是，我可以将 Stripe 直接加载到页脚中，并且一切正常。有多个库，我使用 Stripe 作为一个易于理解的示例。

已尝试

以下尝试收效甚微：

• 在 webpack 配置中标记外部库。这（正确地）将库标记为外部库，并且不会在 require 的解析序列期间尝试捆绑它。然而，期望是手动引入库。
• 我玩过使用伪脚本加载器的想法（当到达该路径时，手动创建一个带有src 属性的<script>，等待它加载，然后让组件完成它的工作。这行得通好的，但是从可维护性的角度来看确实很糟糕（如果需要两个或更多库，那么我需要复制笨拙的手册script load）并且似乎与 webpack“方式”背道而驰。

配置的相关部分

const core = [
    'lodash',
    'react',
    'react-dom',
    'axios',
    'react-router-dom',
];

const config = {
    context: path.resolve(__dirname, './ts_build'),
    node: {
        fs: "empty"
    },
    entry: {
        app: './app.js',
        core: core,
    },
    output: {
        filename: '[name].js',
        chunkFilename: '[name].[id].chunk.js',
        path: path.resolve(__dirname, './../../public'),
        publicPath: 'http://example.org/',
    },
    resolve: {
        modules: [
            path.resolve('./src'),
        ],
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['core'], 
            minChunks: Infinity,
        }),
        new webpack.NamedModulesPlugin(),
    ],
};

Answer 1

你可能想看看：

https://github.com/faceyspacey/webpack-flush-chunks

https://github.com/faceyspacey/require-universal-module

后者是一个通用包，旨在创建同时需要同步和异步需要其他模块的模块。

这个包是你用来刷新请求所需要的 Webpack 块的：

https://github.com/faceyspacey/webpack-flush-chunks

它不是特定于 React Router，这可能意味着它更简单，需要更少的解决方法。

Answer 2

https://github.com/hinok/webpack2-react-router-code-splitting

存储库包含webpack2 + react-router v4 + 使用动态import() 实现code splitting 并使用loadjs 仅按需加载外部库一次。例如，它会为特定路线加载 Stripe.js。

在存储库中，您可以找到两种进行代码拆分的方法

• by route config
• by component

它基于官方 Webpack 文档和 Andrew Clark 的要点

• https://webpack.js.org/guides/lazy-load-react/
• https://gist.github.com/acdlite/a68433004f9d6b4cbc83b5cc3990c194

在准备该存储库时，我发现@Chris 只想为托管在外部 CDN 上的某些路由加载 Stripe.js。从那时起，我一直在考虑使用 AMD 模块并避免泄漏全局变量的最佳方法，但这有点棘手，因为每个 AMD 模块可能有不同的包装器，说包装器我的意思是：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['b'], function (b) {
            return (root.amdWebGlobal = factory(b));
        });
    } else {
        root.amdWebGlobal = factory(root.b);
    }
}(this, function (b) {
    return {};
}));

我可以说UMD 包装器是一种标准，但有时人们更喜欢不那么自以为是的包装器，或者他们只是不关心其他环境。我之所以提到它，是因为在 git 历史记录中，您可以找到 commit called Amdify，这更加证明了如何模拟 AMD env 的概念。最后我决定删除它，因为它远非理想，而且它没有涵盖所有用法和边缘情况。

我找不到任何有关集成外部 AMD 模块或以某种方式与 webpack 一起使用 AMD 模块的信息。相反，我发现它根本行不通

@mc-zone 你应该能够使用 script.js 加载 AMD 模块。但这与 webpack 无关，它只是起作用，因为 AMD 就是为此而设计的。因此，您将无法在这些 AMD 模块中使用 webpack 功能。 webpack 需要对构建时间进行静态分析。

@jhns see on github

webpack 不处理脚本加载。为此使用单独的库。一世。 e. https://github.com/ded/script.js/

@sokra see on github

如果不可能，你不应该 require() 它，而是通过像 script.js 这样的脚本加载器来加载它。

@jhns see on github

Github 上的相关问题：

• https://github.com/webpack/webpack/issues/150
• https://github.com/webpack/webpack/issues/118
• https://github.com/webpack/webpack/issues/462
• https://github.com/webpack/webpack/issues/240
• https://github.com/webpack/webpack/issues/274
• https://github.com/webpack-contrib/script-loader/issues/7

---

今天我在媒体上发现了 an article by James Kale 关于他的项目 react-loadable 的内容与 LazilyLoad 组件几乎相同，但承诺

• 它通过动态 require() 支持服务器端渲染
• 它会在需要时热切地预加载组件

我强烈建议检查一下。

Answer 3

这个问题有一些案例需要详细分析。

让我们开始吧。

观察

• 您应该将react-router的使用从组件切换到PlainRoute对象，这样在进行代码拆分时会给您更大的灵活性，并且还可以跳过<AsyncComponent>组件的创建
• 我很确定你的路由中会有更多的嵌套组件，那么如果credit-card 路由中的嵌套组件需要一个库怎么办？

建议

• 使用您的路由组件作为入口点，因此它不会成为单个组件中的大型实现
• 鉴于上述建议，您可以在其中添加一个包含库依赖项的索引，并在该路由中使用它们（在您的嵌套组件中）
• 您不应在代码的任何部分导入这些库，否则此功能会中断
• 加载这些库后，将它们注入到窗口对象中。并且您的嵌套组件将能够全局访问您的库

这是一个尚未实施的建议，但我正试图就您的问题将您引向正确的方向

最后，这是我建议的方法：

import App from 'components/App';

function errorLoading(err) {
  console.error('Dynamic page loading failed', err);
}

function loadRoute(cb) {
  return (module) => cb(null, module.default);
}

function injectLibraries(libraries) {
  Object.keys(libraries).forEach(key => {
    window[key] = libraries[key];
  });
}

export default {
  component: App,
  childRoutes: [
    {
      path: '/(index.html)',
      name: 'home',
      getComponent(location, cb) {
        const importModules = Promise.all([
          import('components/HomePage/'),
          import('components/HomePage/libraries'),
        ]);

        const renderRoute = loadRoute(cb);

        importModules.then(([component, libraries]) => {
          injectLibraries(libraries);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    },
    {
      path: '/credit-card',
      name: 'credit-card',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('components/CreditCardPage/'),
          import('components/CreditCardPage/libraries'),
        ]);

        const renderRoute = loadRoute(cb);

        importModules.then(([component, libraries]) => {
          injectLibraries(libraries);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    },
  ],
};

您的库文件应如下所示：

import stripe from 'stripe';

export default {
  stripe 
};

Answer 4

如果你使用 Webpack 2，你在 React Router 配置文件中使用 import()

export default {
 component: App,
 childRoutes: [
   {
     path: '/',
     getComponent(location, cb) {
       import('external-library-here')
       .then(function(){
         return System.import('pages/Home');
       })
      .then(loadRoute(cb)).catch(errorLoading);
     }
   },
   {
     path: 'blog',
     getComponent(location, cb) {
       import('pages/Blog').then(loadRoute(cb)).catch(errorLoading);
     }
   },
   {
     path: 'about',
     getComponent(location, cb) {
       import('pages/About').then(loadRoute(cb)).catch(errorLoading);
     }
   },
 ]
};

您还可以使用 Router 组件中的 getComponent 或 getComponents 属性来传递您专门针对该路由所需的模块。