Fatal编程技术网
  • javascript/
  • Javascript 网页包+；反应：多个捆绑包，相同的依赖项？

Javascript 网页包+；反应：多个捆绑包，相同的依赖项？

javascript reactjs webpack

Javascript 网页包+；反应：多个捆绑包，相同的依赖项？,javascript,reactjs,webpack,react-jsx,laravel-mix,Javascript,Reactjs,Webpack,React Jsx,Laravel Mix,我使用LaravelMix和webpack来编译和组合JSX资产。我有一个包含所有依赖项的文件（如React、ReactDOM等）以及应该加载到所有页面上的脚本组件（global.js）。然后我对特定页面（specific.js）使用较小的脚本组件 典型的HTML文档如下所示： <html> <body> <div id="render-here"></div> <script src="/js/global.js">

我使用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已加载的所有相同依赖项？还是我走错了路？

我用
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>






更多信息请点击此处：