0

我使用 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已加载的所有相同依赖项？还是我以错误的方式解决这个问题？

4

1 回答 1

0

我通过使用解决了它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

于 2017-04-13T13:43:57.157 回答