Webpack + React：多个包，相同的依赖项？

Question

我使用 LaravelMix 和 webpack 来编译和组合 JSX 资产。我有一个文件，其中包含所有依赖项（例如 React、ReactDOM 等）以及应在所有页面上加载的脚本组件 (global.js)。然后我为特定页面使用较小的脚本组件 (specific.js).

一个典型的 HTML 文件看起来像这样：

<html>
  <body>
    <div id="render-here"></div>
    <script src="/js/global.js"></script>
    <script src="/js/specific.js"></script>
  </body>
</html>

我的混音配置文件如下所示：

mix.react([
    'resources/assets/js/search/index.jsx'
], 'public/js/global.js');

// Note: specific isn't actually called "specific", but rather named after its function
// like profile.js for editing user profiles.
mix.react([
    'resources/assets/js/specific/index.jsx'
], 'public/js/specific.js');

这不是最优的，因为 specific.js 包含与 global.js 相同的依赖项。如何防止特定组件 (specific.js) 包含已由 global.js 加载的所有相同依赖项？还是我做错了？

Answer 1

我用mix.extract解决了它：

mix.extract([
    'react', 'react-dom',
    'react-redux', 'redux',
    'axios',
    'classnames'
]);

mix.react([
    'resources/assets/js/search/index.jsx'
], 'public/js/global.js');

mix.js([
    'resources/assets/js/specific/index.jsx'
], 'public/js/specific.js');

它呈现两个额外的脚本：manifest.js 和 vendor.js 以及上述供应商脚本。您将这些脚本置于其他脚本之上：

<script type="text/javascript" src="/js/manifest.js"></script>
<script type="text/javascript" src="/js/vendor.js"></script>
<script type="text/javascript" src="/js/global.js" async></script>

更多信息在这里： https://laravel.com/docs/5.4/mix

Webpack + React：多个包，相同的依赖项？

Webpack + react: multiple bundles, same dependencies?

javascript

reactjs

webpack

react-jsx

laravel-mix