个人中心
gpt4 book ai didi

css - Angular 通用 : serving critical CSS and delaying non-critical

转载 作者：技术小花猫 更新时间：2023-10-29 11:43:20 25 4
gpt4 key购买 nike

这基本上是 the code I am using灯塔说我的(几乎是空的!)css 包延迟了我的初始加载。

那么我如何在

中放置指向 critical.scss 的链接

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

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

以及如何延迟主要 styles.scss 的加载，直到预呈现的通用内容加载到浏览器中？ angular-cli.json 中服务器应用程序的配置不包含 styles或 assets , 所以我不明白为什么最初加载 styles.scss

最佳答案

关于延迟主要 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 -。我仍然没有找到一种舒适的方法。

关于css - Angular 通用 : serving critical CSS and delaying non-critical，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48613793/

25 4 0
文章推荐： html - 背景大小包含，但不放大
文章推荐： linux - 如何安全地抑制命令输出？
文章推荐： linux - Debian systemd 服务在网络准备就绪之前启动
文章推荐： python - 在 linux 中执行 python 文件时权限被拒绝
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com