Angular Universal:服务关键 CSS 并延迟非关键 CSS
Posted
技术标签:
【中文标题】Angular Universal:服务关键 CSS 并延迟非关键 CSS【英文标题】:Angular Universal: serving critical CSS and delaying non-critical 【发布时间】: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。 【参考方案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 并延迟非关键 CSS的主要内容,如果未能解决你的问题,请参考以下文章
Angular 2 Universal - 使用手写笔和 pug 模板的服务器端渲染
如何正确启动 Angular Universal 到实时服务器
Angular 5 Universal 在服务器端渲染期间等待 http 请求返回