Optimization 缓存与模块化的重要性

希望这不是一个一般性的问题。我有一个非常大的、更少的代码库，我正试图找到优化it页面速度、可维护性和总体“最佳实践”的最佳方法

假设我有许多不同的页面类型，主页、关于页面、文章、支持页面、产品页面等，还有更多。更少的模块用于滑块、旋转木马、模态、视频、文章、产品页面、支持、关于、主页、页脚、页眉等

我们可以通过几种不同的方式导入： 1）每个页面都一样：我在第一个页面加载时导入所有内容，这会大大降低页面加载速度，并且每个页面不需要所有样式，但在后续页面上，它应该被缓存，不必加载任何内容

无样式：

2）每种页面类型都一样：我将所有小模块（有很多）导入一个文件中，因为它们更有可能在其他地方重用，然后分离出特定于页面类型的内容。这样，页面类型中的所有内容都将被缓存。当用户转到另一个页面类型时，他们仍然需要加载新页面类型的样式，但是他们已经缓存了所有模块。但每个页面不太可能需要所有的混音（并非所有页面都有视频或旋转木马等：

首页：www.less：

无混音

3）每页都有不同的文件：这样就可以为每页自定义一个.LESS文件。这样就不会使用任何样式，只下载必要的文件。这将使页面变得非常小（因此页面加载速度很快），但由于每个页面都不同，因此几乎没有缓存。此外，与一次下载所有内容相比，创建所有这些内容会带来明显的工作量开销：

第一条减：

第二条

因此，最终，#1针对缓存进行了优化，但会导致大量样式表下载和较慢的初始页面加载#3针对小型快速页面加载进行了优化，但没有缓存#2看起来像个中间人

不管现在这是否是过度优化，最好的技术是什么？什么是“标准做法”

@import homepage;
@import prodPage;
@import about;
@import articles;
@import modals;
@import carousels;
@import videos;
@import ...

@import homepage;
@import ...

@import modals;
@import carousels;
@import videos;
@import ...

@import articles;
@import videos;

@import articles;
@import carousels;
@import sliders;