我的问题

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

我要说这里有三件主要的事情需要考虑（它们并不完全相同）：

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

在您的特定情况下，它取决于您的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.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）仍将被缓存，并且只有一个请求针对页面特定代码（然后应该为该页面的每个后续加载进行缓存）。

请注意，如果您要求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();

我永远不会直接接受这种方法，但很少有情况会最有效。

<强>摘要

我总是会选择 One File 方法，然后再考虑优化（除非在开发过程中出现问题）因为过早优化会导致代码异味和更难维护。

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

希望这有帮助！

将多个文件与Laravel Mix结合使用

我的问题

一个想法......

1 个答案: