小编Sim*_*wig的帖子

我用 preact 开发了一个 Web 应用程序。webapp 的总大小约为 30KB gzip（Google Analytics 约为 14KB）。我想添加谷歌分析，但我不希望谷歌分析减慢初始页面加载速度。包含 analytics.js() 的推荐方法是

<!-- Google Analytics -->
<script> 
    window.ga=window.ga||function(){(ga.q=ga.q|| . 
    []).push(arguments)};ga.l=+new Date;
    ga('create', 'UA-XXXXX-Y', 'auto');
    ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'> . 
</script>
<!-- End Google Analytics -->

这工作正常，但在我的其他东西被下载之前，analytics.js 会被下载。我很确定这会影响页面加载，正如您在这张图片中看到的那样）

页面加载完成后下载分析的推荐方法是什么。（就我而言，在下载“菜单”之后）

我在文档中读到了cloudflare缓存js和css文件.(https://support.cloudflare.com/hc/en-us/articles/200172516-Which-file-extensions-does-Cloudflare-cache-for-static-content-)

但在我的情况下,标头cf-cache-status的值为MISS.

一个例子是像这样的css资源:

https://example.com/style.a574b.css

使用以下响应标头:

cache-control: public, max-age=31536000
cf-cache-status: MISS
cf-ray: 405badb4ec2297bc-FRA
content-encoding: br
content-type: text/css
date: Tue, 03 Apr 2018 12:53:31 GMT
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
expires: Wed, 03 Apr 2019 12:53:31 GMT
last-modified: Tue, 03 Apr 2018 01:14:20 GMT
pragma: 
server: cloudflare
status: 200
vary: Accept-Encoding
via: 1.1 vegur
x-application-context: ourder:prod,heroku:3829
x-content-type-options: nosniff
x-xss-protection: 1; mode=block

最初的反应(没有cloudflare之间是:)

 Accept-Ranges: bytes
 Cache-Control: max-age=31536000, public
 Content-Encoding: gzip
 Content-Length: 948
 Content-Type: text/css
 Date: Tue, 03 Apr 2018 19:17:46 GMT
 Expires: 
 Last-Modified: …

我想知道为什么 Gatsby 在每个 html 页面的 head 标记中包含未使用的 css。

我创建了一个新项目

gatsby 新的 my-default-starter https://github.com/gatsbyjs/gatsby-starter-default

我添加了一个 css 模块样式的组件

.container {
    margin: 3rem auto;
    max-width: 600px;
    border: dot-dot-dash;
}

import React from "react"
import containerStyles from "./test.module.css"

const TestContainer = ({ children }) => (
    <section className={containerStyles.container}>{children}</section>
)

export default TestContainer;

最后我在 404 页面中使用了 TestContainer 并且我虽然只有生成的 404.html 页面会在头部包含 .container 样式，但是 index.html 和 page-2.html 也包含样式。

我的项目包含很多 css，index.html 几乎是原来的两倍，因为它包含了整个应用程序中的所有 css。

我做错了什么还是有理由这样做？