将多个文件与Laravel组合在一起
我目前正在潜入Laravel Mix，到目前为止，虽然我完全理解Laravel Mix是什么以及它是如何工作的，但我想更多地了解一些常见的做法和“怎么样”…
例如，考虑这个文件结构：
/resources/assets/js/app.js (all global functions) /resources/assets/js/index/index.js (functions specific to index.js) /resources/assets/js/about/about.js (functions specific to about.js) /resources/assets/js/contact/contact.js (functions specific to contact.js) 现在，理想情况下，我想通过以下方式合并和缩小：
/public/js/index/index-some_hash.js (including app.js) /public/js/about/about-some_hash.js (including app.js) /public/js/contact/contact-some_hash.js (including app.js)
据我所知，实现这一目标的方式如下：
// Index mix.js([ 'resources/assets/js/app.js', 'resources/assets/js/index/index.js' ], 'public/js/index/index.js').version(); // About mix.js([ 'resources/assets/js/app.js', 'resources/assets/js/about/about.js' ], 'public/js/about/about.js').version(); // Contact mix.js([ 'resources/assets/js/app.js', 'resources/assets/js/contact/contact.js' ], 'public/js/contact/contact.js').version();
我的问题
很简单，我想知道以上是否是我正在做的事情的正确方法？ 有更好的方法，或更常见的方法来实现这一点？
如果上述结构是错误的，还有其他方式我的文件应该结合，那么请分享你的知识。 但是，除非有很好的理由，否则我想避免以下情况：
- 为每个页面提供两个单独的文件，即app.min.js和index.min.js。 这要求每个页面进行两次查找，理想情况下应该尽可能less
- 为我的网站上的所有页面提供相同的文件。 将代码提供给不打算使用它的页面会浪费资源，而不pipe是否caching…
一个想法…
我注意到一个JS文件中的一行代码; require('./bootstrap'); 。 打电话给我老式的，但我从来没有在JavaScript中看到过（我假设它是从node.js）。 也就是说，显然它只是将bootstrap.js文件作为依赖项加载到特定文件中。 所以，考虑到这一点，下面的解决scheme会更好：
about.js
require('./app'); // Include global functions // Do some magic here specifically for the 'about' page...
webpack.mix.js：
mix.js(['resources/assets/js/*/*.js'); // For all pages
如果这是一个更好的解决scheme，那么如何使用SASS包含文件呢？ 有没有办法可以改善上述？
我想说这里有三个主要的东西需要考虑（它们并不完全相同）：
- 大小 – 资源将占用的空间量和正在下载的文件大小。
- 请求数 – 正在将多less个文件加载到页面中。
- 浏览器caching – 文件将从caching中取出，而不是从服务器中取出。
在你的特定情况下，它将取决于你自己的app.js文件有多大，你的页面特定文件有多大，没有代码从app.js代码，你有多less页面特定的文件，如果你是在不同的文件中使用一些相同的资源，例如在不同的文件中需要相同的包。
一个文件
如果你的页面特定的文件相当小，那么我只是将它们包含在你的主app.js文件中：
require('./index/index') require('./about/about') //etc
webpack.mix.js：
.js('resources/assets/js/app.js', 'public/js')
这意味着你只能在你的服务器上存储一个编译好的文件，只有一个请求正在为你的JavaScript做出，并且应该为整个网站的每一个后续页面加载caching。
主文件和页面特定文件
如果你有大量的页面特定的文件，或者你的页面特定的文件不是那么小，那么我build议编译你的app.js你的页面特定的文件。 不要忘记将这种方法的结果与One文件方法进行比较，因为One File方法可能仍然更加高效。
webpack.min.js
.js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js/index/index.js', 'public/js/index') .js('resources/assets/js/about/about.js', 'public/js/about')
这将意味着代码的主要部分（ app.js ）仍然会被caching，并且只有一个请求是针对页面特定的代码（然后应该caching该页面的后续加载）。
请注意，如果您在app.js文件和页面特定的文件中都要求包，则它们将不会在2中共享，因此会增加这些请求的总体大小。 可以添加到window对象（例如jQuery）的包只能包含在你的app.js 。
一个主文件和几个页面特定的文件
如果你有一个或两个页面特定的文件是相当大的，但其余的不是你可以编译大部分页面特定的文件到app.js并有较大的文件编译到自己的文件。
所有页面特定的文件
如果所有页面特定的文件都很大，我只能沿着这条路线走，你的app.js文件不是那么大，页面特定文件中的代码/逻辑不能被重构，因此可以跨不同的文件。
这种方式将类似于你的问题中的例子，而不是：
webpack.min.js
mix.js([ 'resources/assets/js/app.js', 'resources/assets/js/index/index.js' ], 'public/js/index/index.js').version();
你将会拥有：
资源/资产/ JS /指数/ index.js
require('../app.js') //rest of file
webpack.min.js
mix.js('resources/assets/js/index/index.js', 'public/js/index/index.js').version();
尽pipe如此，我绝对不会接触到这种方法，但在极less数情况下，效率最高。
概要
我会一直使用One File方法，然后再考虑优化（除非在开发过程中真正吸收），因为过早优化会导致代码异味和难以维护。
这可能是一个很好的文章，以及https://medium.com/@asyncmax/the-right-way-to-bundle-your-assets-for-faster-sites-over-http-2-437c37efe3ff
希望这可以帮助！