使用 Laravel Mix 合并多个文件 [英] Combining Multiple Files with Laravel Mix

问题描述

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

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

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

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:

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

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

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.js file as a dependency into the specific file. So, with this in mind, would the following solution be better:

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

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

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?

推荐答案

我想说这里有 3 件主要的事情你必须考虑(它们并不完全相同):

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 - How many files are being loaded in to the page.
• Browser Cache - Files will be pulled from the cache rather than the server.

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

In your particular situation it would depend on how big your app.js file 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 文件中:

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

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

webpack.mix.js:

webpack.mix.js:

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

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

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.

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

如果您有大量页面特定文件或者您的页面特定文件不是那么小，那么我建议您独立于页面特定文件编译您的 app.js.不要忘记将此方法的结果与 One File 方法进行比较，因为 One 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.

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

这意味着您的大部分代码 (app.js) 仍将被缓存，并且只会对页面特定代码发出一个请求(然后应为每个该页面的后续加载).

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 文件和页面特定文件中都需要包，则它们不会在两者之间共享，因此会增加这些请求的总体大小.可以添加到 window 对象的包(例如 jQuery)应该只包含在您的 app.js 中.

Please note that if you are requiring packages in both your app.js file 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 window object (e.g. jQuery) should only be included in your app.js.

解决此问题的一种方法是使用 供应商提取(Laravel Mix 文档):

One way to get around this would be to use Vendor Extraction (Laravel Mix docs):

.extract(['jquery'])

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

This will produce two extra files that you'll need to include in your html:

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

<小时>

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

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

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.js and have the larger ones compile to their own files.

所有页面特定文件

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

I would only go down this route if all your page specific file are quite large, your app.js file 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.

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

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

你会:

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

resources/assets/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.

总结

我总是会采用 One File 方法，然后再考虑进行优化(除非在开发过程中确实有问题)，因为过早的优化会导致代码异味和更难的可维护性.

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.

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

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

这篇关于使用 Laravel Mix 合并多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！