将多个文件与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

我要说这里有三个主要的东西要考虑(它们并不完全相同):

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

在您的特定情况下,它将取决于您自己的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文件方法进行比较,因为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

希望这可以帮助!