I'd say there are 3 main things you have to consider here (they are not all equal):

• Size - The amount of space your resources are going to take up and the file sizes that are being downloaded.
• Number of requests-有多少文件被加载到页面中.
• Browser Cache-文件将从缓存而不是服务器中提取.

在您的特定情况下，这将取决于您的app.js文件本身有多大，如果没有来自app.js的代码，您的页面特定的文件会有多大，您有多少页面特定的文件，以及您是否在不同的文件中使用一些相同的资源，例如，需要在不同的文件中使用相同的包.

One File个

如果您的页面特定文件非常小，那么我会将它们包含在您的主app.js文件中:

require('./index/index')
require('./about/about')
//etc

网页包.混合js:

.js('resources/assets/js/app.js', 'public/js')

这意味着您只在服务器上存储了一个编译后的文件，对您的javascript只发出了一个请求，并且应该为整个站点的每个后续页面加载缓存该请求.

A main file and a page specific file

If you have a large number of page specific files or your page specific files aren't that small then I would suggest compiling your app.js independently of your page specific files. Don't forget to compare the results of this approach with the One file approach as the One File个 approach might still be more efficient.

网页包.混合js

.js('resources/assets/js/app.js', 'public/js')
.js('资源/assets资源 /js/index/index.js', 'public/js/index')
.js('resources/assets/js/about/about.js', 'public/js/about')

This will mean that the main bulk of your code (app.js) will still be getting cached and that only one request is being made for page specific code (which should then be cache for each subsequent load of that page).

请注意，如果您同时需要app.js个文件和特定于页面的文件中的包，它们将不会在这2个文件之间共享，因此会增加这些请求的总体大小.可以添加到window对象中的包(例如jQuery)应该只包含在您的app.js中.

解决这个问题的一种方法是使用Vendor Extraction(Laravel Mix docs):

.extract(['jquery'])

这将产生两个额外的文件，您需要将它们包括在html中:

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script> 

One main file and a few page specific file

如果你有一个或两个页面特定的文件相当大，但其余的不是，你可以把大部分页面特定的文件编译成app.js个，然后让较大的文件编译成自己的文件.

All page specific files

只有当您的所有页面特定文件都相当大，app.js个文件没有那么大，并且页面特定文件中的代码/逻辑不能重构以便可以在不同的文件之间共享时，我才会走这条路.

This way would similar to the example in your question, however, instead of having:

网页包.混合js

mix.js([
    'resources/assets/js/app.js',
    '资源/assets资源 /js/index/index.js'
], 'public/js/index/index.js').version();

you would have:

资源/assets资源 /js/index/index.js

require('../app.js')

//rest of file

网页包.混合js

mix.js('资源/assets资源 /js/index/index.js', 'public/js/index/index.js').version();

I would never reach for this approach straightaway though and there are very few situations where it would be the most efficient.

Summary个

I would always reach for the One File个 approach and then look at optimising later (unless something really suck out during development) as premature optimisation can lead to code smell and harder maintainability.

这篇文章对你来说可能也是一篇好文章