将多个文件与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。 这需要每个页面进行两次查找，理想情况下应该尽可能少
  • 将相同的文件提供给我网站上的所有页面。 将代码提供给不打算使用它的页面会浪费资源，而不管缓存...

    • 一个想法...

    我注意到其中一个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包含文件？ 有没有办法可以改善上述情况？

    我会说在这里你需要考虑三件主要事情（它们并不都是平等的）：

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

    • 在你的特定情况下，它取决于你的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

    希望这可以帮助！

    链接地址: http://www.djcxy.com/p/95341.html

    上一篇: Combining Multiple Files with Laravel Mix

    下一篇: What is the starting point in Angular 2 before calling AppComponent.ts?