将多个文件与Laravel组合在一起

我目前正在潜入Laravel Mix,到目前为止,虽然我完全理解Laravel Mix是什么以及它是如何工作的,但我想更多地了解一些常见的做法和“怎么样”…

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

/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。 这要求每个页面进行两次查找,理想情况下应该尽可能less
  • 为我的网站上的所有页面提供相同的文件。 将代码提供给不打算使用它的页面会浪费资源,而不pipe是否caching…

一个想法…

我注意到一个JS文件中的一行代码; require('./bootstrap'); 。 打电话给我老式的,但我从来没有在JavaScript中看到过(我假设它是从node.js)。 也就是说,显然它只是将bootstrap.js文件作为依赖项加载到特定文件中。 所以,考虑到这一点,下面的解决scheme会更好:

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 

如果这是一个更好的解决scheme,那么如何使用SASS包含文件呢? 有没有办法可以改善上述?

       

网上收集的解决方案 "将多个文件与Laravel组合在一起"

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

  • 大小 – 资源将占用的空间量和正在下载的文件大小。
  • 请求数 – 正在将多less个文件加载到页面中。
  • 浏览器caching – 文件将从caching中取出,而不是从服务器中取出。

在你的特定情况下,它将取决于你自己的app.js文件有多大,你的页面特定文件有多大,没有代码从app.js代码,你有多less页面特定的文件,如果你是在不同的文件中使用一些相同的资源,例如在不同的文件中需要相同的包。


一个文件

如果你的页面特定的文件相当小,那么我只是将它们包含在你的主app.js文件中:

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

webpack.mix.js:

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

这意味着你只能在你的服务器上存储一个编译好的文件,只有一个请求正在为你的JavaScript做出,并且应该为整个网站的每一个后续页面加载caching。


主文件和页面特定文件

如果你有大量的页面特定的文件,或者你的页面特定的文件不是那么小,那么我build议编译你的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 )仍然会被caching,并且只有一个请求是针对页面特定的代码(然后应该caching该页面的后续加载)。

请注意,如果您在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(); 

尽pipe如此,我绝对不会接触到这种方法,但在极less数情况下,效率最高。


概要

我会一直使用One File方法,然后再考虑优化(除非在开发过程中真正吸收),因为过早优化会导致代码异味和难以维护。

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

希望这可以帮助!