Question

我使用Laravel Mix和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：多个bundle，相同的依赖关系？

1 个答案: