Tom-Bonnike/netlify-plugin-inline-critical-css

# netlify-plugin-inline-critical-css 一个用于提取并内联[关键 CSS](https://web.dev/extract-critical-css/) 的 Netlify Build 插件，基于 [`critical` 包](https://github.com/addyosmani/critical) 构建。它会提取首屏内容的 CSS 并将其内联到 HTML 文档中，以便尽可能快地向用户渲染内容。 将关键 CSS 直接内联到 HTML 文档中可以消除额外的请求，并可用于交付“单次往返”的关键路径，其中只有 HTML 是阻塞渲染的资源。你可以将此插件与 [`netlify-plugin-inline-source`](https://github.com/tom-bonnike/netlify-plugin-inline-source) 结合使用，以内联你的其他资产/资源，例如小图像、SVG 或阻塞渲染的脚本。 ## 用法与输入 要在 Netlify UI 中安装该插件，请使用此[应用内直接安装链接](https://app.netlify.com/plugins/netlify-plugin-inline-critical-css/install)，或前往[插件目录](https://app.netlify.com/plugins)。 对于基于文件的安装，请将其添加到你的 `netlify.toml` 文件中。 ``` [[plugins]] package = "netlify-plugin-inline-critical-css" # All inputs are optional, so you can omit this section. # Defaults are shown below. [plugins.inputs] # A filter used to target specific files in the publish directory. Be sure to only target HTML files. This option is passed onto the readdirp library, see https://github.com/paulmillr/readdirp#options for more info. fileFilter = ["*.html"] # A filter used to target or ignore specific directories in the publish directory. This option is passed onto the readdirp library, see https://github.com/paulmillr/readdirp#options for more info. directoryFilter = ["!node_modules"] # You can refer to `critical`’s documentation: https://github.com/addyosmani/critical for all options below. # Whether to remove the inlined styles from any stylesheet referenced in the HTML. Use with caution. Removing the critical CSS per page results in a unique async loaded CSS file for every page, meaning you can’t rely on cache across multiple pages. extract = false # An array of objects containing `width` and `height` properties to deliver critical CSS for multiple screen resolutions. dimensions = [ { width = 414, height = 896 }, { width = 1920, height = 1080 } ] ``` 要完成基于文件的安装，请从项目的基础目录中使用 npm、yarn 或任何其他 Node.js 包管理器，将插件添加到 `package.json` 的 `devDependencies` 中。 ``` npm install -D netlify-plugin-inline-critical-css ``` 一旦安装并配置完成，该插件将自动在你站点的所有部署中运行。 ### 本地测试 要[在本地测试此插件](https://docs.netlify.com/configure-builds/build-plugins/create-plugins/#local-plugins)，你可以使用 [Netlify CLI](https://docs.netlify.com/cli/get-started/#run-builds-locally)： ``` # 安装 Netlify CLI。 npm install netlify-cli -g # 在项目工作目录中，使用 build bot 运行构建，就像 Netlify 所做的那样。 netlify build ```

标签：Critical CSS, CSS优化, HTML内联, MITM代理, Netlify Build, Netlify插件, SEO优化, Syscall, Web开发, Web性能, 前端优化, 前端工程化, 多模态安全, 网站加速, 自定义脚本, 静态网站, 页面加载速度, 首屏内容, 首屏渲染