Question

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

那么如何在

中添加一个指向critical.scss的链接

<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

Answer 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-。我仍然没有找到舒适的方法。

Angular Universal：服务于关键CSS并延迟非关键性

1 个答案: