Angular Universal：服务关键 CSS 并延迟非关键 CSS答案

【问题标题】：Angular Universal: serving critical CSS and delaying non-criticalAngular Universal：服务关键 CSS 并延迟非关键 CSS
【发布时间】：2018-07-14 18:59:12
【问题描述】：

这基本上是the code I am using，lighthouse 说我的（几乎是空的！）css 包正在延迟我的初始加载。

那么我如何在

<head><style>DONT_WANT_TO_WRITE_STUFF_INLINED</style>...</head>

有没有比https://www.npmjs.com/package/critical 或内联写所有内容更好的解决方案？

在浏览器中加载预渲染的 Universal 内容之前，如何延迟加载主要的 styles.scss？ angular-cli.json 中服务器应用的配置不包含styles 或assets，所以我不明白为什么最初加载styles.scss

【问题讨论】：

你找到解决方案了吗？
@godblessstrawberry 不，我没有。我不再担心 10 毫秒的加载时间差异。拥有可维护的代码更为重要。如果您想 100% 专注于 SEO，我建议您首先使用 AMP 而不是 Angular。

标签： css angular progressive-web-apps angular-universal lighthouse

【解决方案1】：

关于延迟加载主styles.scss，我依赖两件事：

首先，我使用--extract-css=false 标志构建应用程序。这确保了样式包将是一个 JavaScript 文件。
其次，我推迟加载该文件。为此，我依赖一个名为defer.styles.js 的小脚本，该脚本在构建过程结束时运行。该脚本只是查找加载样式的脚本标签，并向其添加defer。

const path = require('path');

const htmlPath = path.join(__dirname, 'dist', 'browser', 'index.html');

fs.readFile(htmlPath, 'utf8', (err, data) => {
    if (err) {
        console.log(err);
        return;
    }

    const index = data.search(`src="styles.`);

    if (index > -1) {
        const output = [data.slice(0, index), 'defer ', data.slice(index)].join('');
        console.log(output);
        fs.writeFile(htmlPath, output, 'utf8', () => {
            console.log('Styles succesfully deferred');
        })
    }
});

关于您的其他问题 - 如何加载关键的 css -。我仍然没有找到一种舒适的方式。

【讨论】：