2

背景

我们的 Web 应用程序遵循基于组件的设计模式，每个组件都包含一个模板、Sass 部分和 JavaScript 模块，如下所示：-

components/action_button/_action_button.html.erb
                        /_action_button.scss
                        /action_button.js

JavaScript 模块import是组件的 Sass 部分，模板通过 Rails 呈现。Webpack 配置了许多加载器和插件来编译样式并（通过mini-css-extract-plugin）将生成的 CSS 提取到每个入口点的独立样式表中，例如：-

home.js => home.js, home.css
search.js => search.js, search.css

组件import根据使用情况被编入入口点（即，如果action_button存在于 'home' 上，则它会呈现在视图中的某处并import '~/components/action_button/action_button.js';在home.js.

问题

为了改善页面加载体验，我们手动@import将选择的几个组件 Sass 部分输入到critical.scss入口点，然后将输出的 CSS 内联到<head>文档中，并异步加载完整的样式表。

理想情况下，我们希望动态地执行此操作，我想到的一种方法是通过import语句表示组件的关键性。也许使用自定义加载器？：-

import 'critical-loader!~/components/action_button/action_button.js';

问题是我不知道 Webpack 加载器是如何工作的。我本质上希望它保留所有现有规则，但将提取的 CSS 从其中的 Sass partialsimport重定向到.critical.css

有谁知道现有的解决方案或知道从哪里开始解决这样的问题？

4

0 回答 0