使用 Laravel Mix 合并多个文件

Question

我目前正在研究 Laravel Mix，到目前为止，虽然我完全理解 Laravel Mix 是什么以及它是如何工作的，但我正在努力了解更多关于常见做法和 'How-Tos'...

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

/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。 这需要每页查找两次，理想情况下应尽可能少
向我网站上的所有页面提供相同的文件。 向不打算使用它的页面提供代码是一种资源浪费，无论缓存如何...

一个想法...

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

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 包含文件？有什么方法可以改进上述内容吗？

Answer 1

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

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

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

一个文件

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

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

webpack.mix.js:

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

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

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

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

webpack.mix.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) 仍将被缓存，并且只有一个请求是针对页面特定代码（随后每次加载时都应缓存）那个页面）。

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

中

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

.extract(['jquery'])

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

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

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

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

所有页面特定文件

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

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

webpack.mix.js

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

你会：

resources/assets/js/index/index.js

require('../app.js')

//rest of file

webpack.mix.js

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

虽然我永远不会直接采用这种方法，但在极少数情况下它是最有效的。

总结

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

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

使用 Laravel Mix 合并多个文件

Combining Multiple Files with Laravel Mix

node.js

laravel

gulp

laravel-elixir

laravel-mix

我的问题

一个想法...