打破常规:Vite 插件——JS 动态注入 CSS 功能
在前端开发中,我们常常需要权衡代码分割和性能之间的平衡。现在,借助 vite-plugin-css-injected-by-js 这款创新的 Vite 插件,你可以将所有的 CSS 直接通过 JavaScript 添加到页面上,实现单一 JS 文件的应用,从而简化文件管理并优化加载速度。
项目介绍
vite-plugin-css-injected-by-js 是一个巧妙的工具,它改变了传统的 CSS 链接方式,不再生成独立的 CSS 文件或在 HTML 中引入它们。相反,这个插件会捕获构建过程中生成的所有 CSS,并通过 JavaScript 将其动态地添加到页面样式中。这种设计使得你可以完全控制 CSS 的加载时间,甚至可以配合严格的 CSP(Content Security Policy)策略。
技术分析
该插件的工作原理是,遍历构建过程中的所有 CSS 资源,然后在 HTML 中移除这些链接,转而通过自定义的 JavaScript 代码将 CSS 内容注入到页面头部。你可以配置 CSS 注入的时间点(在你的应用代码之前或之后),也可以为注入的 style 元素设置自定义 ID,以满足特定场景的需求。
对于那些使用了 Vite 的 plugin-legacy
的开发者,需要注意的是,由于 plugin-legacy
对 CSS 处理有特定需求,所以这个插件不再支持 plugin-legacy
。
应用场景
- 单一 JS 文件部署,减少 HTTP 请求
- 自定义 CSS 加载时机,比如延迟加载以提高首屏渲染速度
- 与 CSP 策略兼容,通过设置
useStrictCSP
使用非空值 nonce - 在多入口点应用中,通过
relativeCSSInjection
和jsAssetsFilterFunction
配合处理 CSS 注入
项目特点
- 灵活注入:可根据项目需求配置 CSS 注入的时机。
- 自定义化:可定制注入代码和 style 元素 ID,允许你在运行时执行自定义函数进行 CSS 修改。
- 资源筛选:可以通过
cssAssetsFilterFunction
和jsAssetsFilterFunction
指定哪些 CSS 或 JS 文件参与 CSS 注入,便于多入口点应用的管理。 - 严格 CSP 支持:开启
useStrictCSP
后,插件会自动为 style 标签生成并添加 nonce 值,符合严格的 CSP 策略要求。
安装与使用
要安装此插件,只需在项目中运行:
npm i vite-plugin-css-injected-by-js --save
然后在你的 Vite 配置文件中加入以下代码:
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
export default {
plugins: [
cssInjectedByJsPlugin(),
],
};
无需复杂的配置,即可开始享受动态 CSS 注入带来的便利。
总之,vite-plugin-css-injected-by-js 提供了一种全新的 CSS 管理方式,让你在 Vite 上实现更高效、更可控的前端开发。试试看,看看它如何为你的项目带来改变吧!
HunyuanImage-3.0
HunyuanImage-3.0 统一多模态理解与生成,基于自回归框架,实现文本生成图像,性能媲美或超越领先闭源模型00ops-transformer
本项目是CANN提供的transformer类大模型算子库,实现网络在NPU上加速计算。C++043Hunyuan3D-Part
腾讯混元3D-Part00GitCode-文心大模型-智源研究院AI应用开发大赛
GitCode&文心大模型&智源研究院强强联合,发起的AI应用开发大赛;总奖池8W,单人最高可得价值3W奖励。快来参加吧~0287Hunyuan3D-Omni
腾讯混元3D-Omni:3D版ControlNet突破多模态控制,实现高精度3D资产生成00Spark-Chemistry-X1-13B
科大讯飞星火化学-X1-13B (iFLYTEK Spark Chemistry-X1-13B) 是一款专为化学领域优化的大语言模型。它由星火-X1 (Spark-X1) 基础模型微调而来,在化学知识问答、分子性质预测、化学名称转换和科学推理方面展现出强大的能力,同时保持了强大的通用语言理解与生成能力。Python00GOT-OCR-2.0-hf
阶跃星辰StepFun推出的GOT-OCR-2.0-hf是一款强大的多语言OCR开源模型,支持从普通文档到复杂场景的文字识别。它能精准处理表格、图表、数学公式、几何图形甚至乐谱等特殊内容,输出结果可通过第三方工具渲染成多种格式。模型支持1024×1024高分辨率输入,具备多页批量处理、动态分块识别和交互式区域选择等创新功能,用户可通过坐标或颜色指定识别区域。基于Apache 2.0协议开源,提供Hugging Face演示和完整代码,适用于学术研究到工业应用的广泛场景,为OCR领域带来突破性解决方案。00- HHowToCook程序员在家做饭方法指南。Programmer's guide about how to cook at home (Chinese only).Dockerfile09
- PpathwayPathway is an open framework for high-throughput and low-latency real-time data processing.Python00
热门内容推荐
最新内容推荐
项目优选









