我目前在潜水的过程分为Laravel混合，到目前为止，虽然我完全理解Laravel混合以及它是如何工作的，我想了解多一点关于常见的做法和“入门指南” ......合并多个文件与Laravel混合

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

/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包含文件呢？有没有办法可以改善上述情况？

来源

2017-03-06 Ben Carey

我认为sass有一个'import'语句，它的行为像'require'在javascript中 –

@CerlinBoss完美，这是否意味着我的'可能'解决方案比第一个更好？ –

我能看到的唯一区别是一个纤细的混合文件。 –

我说有，你要在这里考虑3米主要的东西（他们并不都是平等的）：

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

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

一个文件

如果你的页面的特定文件都相当小的话，我只想包括他们在您的主要app.js文件：

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

webpack.mix.js：

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

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

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

如果您有大量的页面特定文件或你的页面的特定文件不小，那么我建议有编译您app.js独立你的页面特定文件。不要忘记比较这种方法的结果与一个文件的方法，因为一个文件的方法可能仍然更有效。

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/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();

我永远不会达到这种方式，虽然直接，并且有很少的情况下，它将是最有效的。

摘要

我总是会端起一个文件方法，再看看后面优化（除非事情发展过程中确实吸出），如过早的优化会导致代码的气味，更难可维护性。

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

希望这有助于！

来源

2017-07-16 10:08:06

合并多个文件与Laravel混合

我的问题

一个想法...

回答

相关问题