使用 Laravel Mix 组合多个文件

Combining Multiple Files with Laravel Mix

提问by Ben Carey

I am currently in the process of diving into Laravel Mix and so far, whilst I fully understand what Laravel Mix is and how it works, I am trying to understand a little more about the common practices and 'How-Tos'...

我目前正在深入研究 Laravel Mix，到目前为止，虽然我完全了​​解 Laravel Mix 是什么以及它是如何工作的，但我正在尝试更多地了解常见做法和“操作方法”......

For instance, consider this file structure:

例如，考虑这个文件结构：

/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)

Now, ideally, I would like the following combined and minified in the following way:

现在，理想情况下，我希望以下列方式组合和缩小以下内容：

/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)

As far as I understand, the way to achieve this is something like the following:

据我了解，实现这一目标的方法如下：

// 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();

My Question

我的问题

Quite simply, I would like to know if the above is the correct method for doing what I am trying to do? Are there better ways, or more common ways of achieving this?

很简单，我想知道上述是否是做我想做的事情的正确方法？有没有更好的方法，或更常见的方法来实现这一目标？

If the above structure is wrong and there are other ways my files should be combined then please share your knowledge. However, unless there is a very good reason, I would like to avoid the following:

如果上述结构是错误的，并且我的文件还有其他组合方式，那么请分享您的知识。但是，除非有很好的理由，否则我想避免以下情况：

• Serving two separate files for each page i.e. app.min.js and index.min.js. This requires two lookups per page, ideally it should be as few as possible
• Serving the same file to ALL pages on my site. Serving code to a page that is not going to use it is a waste of resource, regardless of caching...

• 为每个页面提供两个单独的文件，即 app.min.js 和 index.min.js。这需要每页两次查找，理想情况下应该尽可能少
• 向我网站上的所有页面提供相同的文件。向不打算使用它的页面提供代码是一种资源浪费，无论缓存如何......

One Idea...

一个想法...

I noticed a line of code in one of the JS files; require('./bootstrap');. Call me old fashioned but I have never seen this in JavaScript (I assume it is from node.js). That said, obviously it is just loading the bootstrap.jsfile as a dependency into the specific file. So, with this in mind, would the following solution be better:

我注意到其中一个 JS 文件中有一行代码；require('./bootstrap');. 称我为老式，但我从未在 JavaScript 中看到过这个（我假设它来自 node.js）。也就是说，显然它只是将bootstrap.js文件作为依赖项加载到特定文件中。因此，考虑到这一点，以下解决方案是否会更好：

about.js

关于.js

require('./app'); // Include global functions

// Do some magic here specifically for the 'about' page...

webpack.mix.js:

webpack.mix.js：

mix.js(['resources/assets/js/*/*.js'); // For all pages

If this is a better solution then how do I include files using SASS as well? Are there ways the above can be improved at all?

如果这是一个更好的解决方案，那么我如何也使用 SASS 包含文件？有没有办法改善上述情况？

回答by Rwd

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

我想说的是，您必须在这里考虑 3 件主要事情（它们并不完全相同）：

• Size- The amount of space your resources are going to take up and the file sizes that are being downloaded.
• Number of requests- How many files are being loaded in to the page.
• Browser Cache- Files will be pulled from the cache rather than the server.

• 大小- 您的资源将占用的空间量以及正在下载的文件大小。
• 请求数- 有多少文件被加载到页面中。
• 浏览器缓存- 文件将从缓存而不是服务器中提取。

In your particular situation it would depend on how big your app.jsfile is on it's own, how big your page specific files would be without the code the code from app.js, how many page specific files you have and if you're using some of the same resources in your different file e.g. requiring the same package(s) in the different files.

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

---

---

One File

一档

If your page specific files are fairly small then I would just included them in your main app.jsfile:

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

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

webpack.mix.js:

webpack.mix.js：

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

This would mean that you're only storing one compiled file on your server, only one request is being made for your javascript and it should be cached for every subsequent page load across the site.

这意味着您只在服务器上存储一个编译文件，只为您的 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 having compiling your app.jsindependently of your page specific files. Don't forget to compare the results of this approach with the One fileapproach as the One Fileapproach might still be more efficient.

如果您有大量特定于页面的文件，或者特定于页面的文件不是那么小，那么我建议您app.js独立于特定于页面的文件进行编译。不要忘记将此方法的结果与单一文件方法的结果进行比较，因为单一文件方法可能仍然更有效。

webpack.min.js

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')

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) 仍将被缓存，并且只对页面特定代码发出一个请求（然后应该为该页面的每个后续加载缓存）。

Please note that if you are requiring packages in both your app.jsfile and page specific file they will not be shared across the 2 so it will increase the overall size for those requests. Packages that can be added to the windowobject (e.g. jQuery) should only be included in your app.js.

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

---

---

One main file and a few page specific file

一个主文件和几页特定文件

If you have one or two page specific files that are fairly big but the rest aren't you could compile the majority of your page specific files in to app.jsand have the larger ones compile to their own files.

如果您有一个或两个页面特定文件相当大，但其余文件不是，您可以将大部分页面特定文件app.js编译到其中，并将较大的文件编译为它们自己的文件。

---

---

All page specific files

所有页面特定文件

I would only go down this route if all your page specific file are quite large, your app.jsfile wasn't that big and the code/logic in your page specific files couldn't be refactored so that it could be shared across different files.

如果您的所有页面特定文件都非常大，您的app.js文件不是那么大，并且您的页面特定文件中的代码/逻辑无法重构以便它可以在不同文件之间共享，我只会沿着这条路线走下去。

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

但是，这种方式类似于您问题中的示例，而不是：

webpack.min.js

webpack.min.js

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

you would have:

你将会拥有：

resources/assets/js/index/index.js

资源/资产/js/index/index.js

require('../app.js')

//rest of file

webpack.min.js

webpack.min.js

mix.js('resources/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 Fileapproach and then look at optimising later (unless something really suck out during development) as premature optimisation can lead to code smell and harder maintainability.

我总是会使用One File方法，然后再考虑优化（除非在开发过程中真的很糟糕），因为过早的优化会导致代码异味和更难的可维护性。

This might be a good article for you as well https://medium.com/@asyncmax/the-right-way-to-bundle-your-assets-for-faster-sites-over-http-2-437c37efe3ff

这对您来说也可能是一篇好文章https://medium.com/@asyncmax/the-right-way-to-bundle-your-assets-for-faster-sites-over-http-2-437c37efe3ff

Hope this helps!

希望这可以帮助！