www.apollographql.com/docs/apollo-server/performance/apq/ 好处 ✅ N+1 Query ❎ Dataloader APQ 缓存 Optimistic UI ✅ tailwindcss...purgecss: https://github.com/FullHuman/purgecss uncss: https://github.com/uncss/uncss 好处 按需构建 webpack-bundle-analyzer...(next.js) -> https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts js...terser css -> cssnano gzip/brotli webp picture width/height 懒加载 Image Component -> next.js imagemin-webpack-plugin...react/react-dom lodash echarts split-chunks (http cache) -> next.js 路由懒加载 image prefetch -> import('') Webpack
我们做项目时，通常会使用一些常用的css框架，比如我会经常用到 tailwindcss ，bootstrap 等等，但是使用这些框架后，打包出来的css文件过于庞大，而且很多样式是我们没有使用到的...这时候我们就可以用 Purgecss来只打包我们项目中正在使用到的样式来减小css文件体积。本篇文章使用 tailwindcss 在 vue中的例子进行说明： 1....安装tailwindcss cd test-purgecss npm i tailwindcss -save npm i @fullhuman/postcss-purgecss --save-dev 3...("tailwindcss"); const postcssPurgecss = require(`@fullhuman/postcss-purgecss`); const purgecss = postcssPurgecss...在react中或者其他地方中的使用方式，可以去purgecss官网进行查看，本篇文章参考： https://purgecss.com/guides/vue.html#use-the-vue-cli-plugin
第一版：使用 Hexo 和 Github pages 优点：重新部署只要花 5 分钟，内容管理在本地 纯静态、免费； 缺点：依赖 Github，国内访问困难； 第二版：React + Antd + Mysql...服务器是阿里云 ESC 最低配 优点： 感觉没什么优点； 缺点： 浏览器渲染，搜索引擎无法收录 ESO 优化难，Antd 组件使用方便，但前台页面定制需要覆盖样式； 第三版：NextJS + TailwindCSS...+ Postgresql 优点： 服务端渲染（SSR) + 静态生成， 访问速度极快，全新 UI 支持换肤； TailwindCSS 在国外如火如荼，但是在国内却很少看到在生产上应用，对我来说， TailwindCSS...4、之前写了《使用 CSS variables 和 Tailwind css 实现主题换肤》也运用到了我的博客中。...codemiror 和 remark 自己写的组件 ，这一版发现掘金的 Markdown 编辑比较好用，就直接使用了bytemd, 底层都是使用了 remark 和 rehype，支持任何框架，并且拥有丰富的插件
可以通过npm或Yarn进行安装： npm install tailwindcss 或 yarn add tailwindcss 安装完成后，我们需要初始化Tailwind CSS的配置文件。...在HTML文件中，我们可以直接使用Tailwind CSS提供的类名来快速构建页面。以下是一个简单的示例： <!...Tailwind CSS文件： npx tailwindcss build src/styles.css -o dist/output.css 在生产环境中，为了优化文件大小，我们可以使用PurgeCSS...来移除未使用的CSS类。...首先，安装PurgeCSS： npm install purgecss --save-dev 然后，在tailwind.config.js文件中添加PurgeCSS配置： module.exports
第一版：使用 Hexo 和 Github pages 优点：重新部署只要花5分钟，内容管理在本地 纯静态、免费； 缺点：依赖Github，国内访问困难； 第二版：React + Antd...第三版：NextJS + TailwindCSS + Postgresql 优点： 服务端渲染（SSR) + 静态生成， 访问速度极快，全新 UI 支持换肤； TailwindCSS 在国外如火如荼...，但是在国内却很少看到在生产上应用，对我来说， TailwindCSS 不仅仅是一个原子类的超级样式库； 1、我们在写样式的时候，经常会写类名，团队成员之间会存在样式冲突的可能，虽然我们可以使用 css...{js,ts,jsx,tsx}']打包时只会提取使用到的样式，让应用css最小化。 4、之前写了《使用 CSS variables 和Tailwind css实现主题换肤》也运用到了我的博客中。...codemiror 和 remark 自己写的组件 ，这一版发现掘金的 Markdown 编辑比较好用，就直接使用了bytemd, 底层都是使用了 remark 和 rehype，支持任何框架，并且拥有丰富的插件
为什么要使用 Tailwind CSS 可定制开发 天生就支持响应式布局 组件友好 ......No 安装 Tailwind CSS 接下来我们将 Tailwind CSS 集成到我们的项目中 cd tailwind npm install tailwindcss 新建 tailwind.css,...Tailwind config file: tailwind.config.js 新建 postcss.config.js 文件 touch postcss.config.js 填入以下内容： const purgecss...= require('@fullhuman/postcss-purgecss')({ content: [ '....[purgecss] : [] ] } 以上步骤，大致就可以将 Tailwind CSS 引入到 Vue 项目中了。
优化的文件大小： • Tailwind CSS 可以与 PurgeCSS 集成，自动移除未使用的 CSS 类，从而显著减少生成的 CSS 文件大小，提高页面加载速度。...一致性和可维护性： • 使用 Tailwind CSS 的工具类可以确保项目中样式的一致性，减少样式冲突和覆盖问题，提升代码的可维护性。...三、Tailwind CSS 的使用场景 快速原型设计： • 通过使用 Tailwind CSS 的工具类，开发者可以迅速搭建原型页面，快速验证设计想法和用户需求。...Learn More 构建 Tailwind CSS 在开发过程中，可以使用以下命令来生成 Tailwind CSS 文件： npx tailwindcss build src/styles.css -...o dist/output.css 优化生产环境 在生产环境中，使用 PurgeCSS 来移除未使用的 CSS 类，从而优化文件大小： module.exports = { purge: ['.
项目初始化方式方式一：在新项目中使用# 创建项目目录mkdir my-tailwind-projectcd my-tailwind-project# 初始化 package.jsonnpm init -...{ '@fullhuman/postcss-purgecss': { content: [ './src/**/*....生产环境优化CSS 压缩未使用样式清除浏览器兼容性处理常见问题与解决方案1. 样式无法生效检查 content 配置是否正确确认 CSS 文件正确导入验证类名拼写2....开发流程规范使用版本控制遵循团队编码规范定期更新依赖2. 性能优化建议合理配置 purge 选项优化构建流程监控样式文件大小3....团队协作要点统一开发环境共享配置文件制定编码规范总结完善的开发环境和工具链配置是高效开发的基础。通过：正确的环境搭建合适的工具选择优化的配置设置规范的开发流程我们可以显著提升开发效率和项目质量。
创建一个 Chrome 插件是一个有趣的项目，特别是当结合使用强大的工具如 React、TypeScript、TailwindCSS 和 Vite 时 在这篇文章中，我们将逐步引导完成整个过程，了解如何在...让我们使用现代 Web 技术来创建一个 Chrome 插件：React 用于构建用户界面，TypeScript 提供类型安全，TailwindCSS 用于样式设计，Vite 提供快速的开发体验。...设置开发环境 安装 Node.js 和 npm 首先，从官方网站下载并安装 Node.js。这也会安装 npm，你将使用它来管理项目依赖项。...这个文件包含关于扩展的元数据，包括其名称、版本、权限和将使用的后台脚本。 Chrome 插件的关键组件 一个典型的 Chrome 插件包括： 后台脚本：在后台运行并处理事件。...结论 使用 React、TypeScript、TailwindCSS 和 Vite 创建一个 Chrome 插件是提升开发技能的好方法，并通过尝试新功能和技术不断学习。
如果您对TailwindCSS和Nuxt.js的工作原理有基本的了解，那么对遵循本教程将会有所帮助。...使用 Nuxt 设置 TailwindCSS 要开始将 TailwindCSS 与 Nuxt 一起使用，您可以按照TailwindCSS 网站上的说明安装并配置 TailwindCSS 作为依赖项。...将 SVG 图标与 TailwindCSS 结合使用 在应用程序中使用 SVG 图标是一种常见的做法。通过正确的图标，我们可以为用户提供出色的用户体验，并使应用程序更具吸引力和吸引力。...概括 在本教程中，我们学习了如何在 Nuxt.js 应用程序中安装和配置 TailwindCSS。...这些当然只是 TailwindCSS 可以做的事情以及它可以为 Nuxt 应用程序提供的功能的次要方面。如果您还有其他使用 TailwindCSS 和 Nuxt 的技巧，请在评论部分与我分享！
前言 我当时学习开发 Chrome 插件的时候，还不会 Vue，更别说 Webpack 了，所以使用的都是原生的 html 开发，效率就不提了，而这次就准备使用 vue-cli 来进行编写一个某...webpack，所以更改代码将会热更新，不用反复的编译导入。...文件按需引入，总之就是折腾了我一个晚上的时间） 安装 tailwindcss 不过官方提供了如何使用 TailwindCSS，这里就演示一下 在 Vue 3 和 Vite 安装 Tailwind CSS...- Tailwind CSS 中文文档 推荐安装低版本，最新版有兼容性问题 npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss.../style.css"; src/popup/App.vue /* purgecss start ignore */ @tailwind base; @tailwind components
有一些组件使用 tailwindcss，构建出了非常酷炫的 UI，比如headlessui，确实是非常精美的 UI 库。...tailwindcss 的 github 的活跃度和 npm 下载量都非常高，原子级别的细粒度，争议的点： 标签使用 class 过长，不习惯 html 标签可读性变差一些（个人觉得可读性差很多） 维护性可能也会降低一些...我有点看花眼） 需要一点学习成本，前期不熟悉，要一直去搜索，不过配上插件是挺快的 存在的几个小问题： 样式覆盖问题，样式是由样式表中的 class 决定，不是 class 里面的顺序 编译的时候引入 PurgeCSS...如果使用了 UI 库，又使用 tailwindcss 的基础样式，基础样式由组件提供，一些特殊一点的由 tailwindcss 提供。或者说，大神们使用的场景，不是我理解的场景？...不需要像那些说的，用了tailwindcss就摆脱自定义class。 往期有文章《vite 新建 vue3 项目及安装插件笔记》有说了怎么安装 tailwindcss 和使用。
可维护性下降： 当项目中存在大量无用的冗余样式时，代码库的整体可读性和可维护性都会下降。开发人员可能会在不确定哪些样式正在使用的情况下进行更改，这可能导致样式冲突和不一致。 如何解决呢？...推荐三款工具，可根据项目情况进行选型： PurgeCSS PurgeCSS 通过分析你的内容和 CSS 文件，首先它将 CSS 文件中使用的选择器与内容文件中的选择器进行匹配，然后它会从 CSS 中删除未使用的选择器...('mini-css-extract-plugin') const PurgecssPlugin = require('purgecss-webpack-plugin') const PATHS =...由于其能够模拟 HTML 和 JavaScript 的执行，UnCSS 可以有效地从 web 应用程序中删除未使用的选择器。 但是，其模拟行为可能会在性能和实用性方面带来成本消耗。...如果你不使用服务器端渲染（server-side rendering），并且网站上只有简单的 HTML 和 javascript的话，则它应该可以正常工作，并且在 CSS 文件大小方面要优于 PurgeCSS
与 Webpack 相比，Vite 在开发过程中能显著缩短构建时间和热重载时间。它通过利用浏览器中的 ES 模块等现代浏览器功能来实现这一目标。...在Vite中，可以使用vite-plugin-purgecss： npm install --save-dev vite-plugin-html-purgecss 在vite.config.js中这么使用...从 Webpack 过渡到 Vite 确实需要仔细规划和测试，尤其是在考虑插件替换或重构时。但这一举措也会带来可观的回报。...也可以考虑探索其他现代工具，如 esbuild 和 Parcel，以找到最适合你项目需求的工具。 请记住，工具并不是最重要的，重要的是如何使用它来实现目标。...Webpack、Vite、esbuild 和 Parcel 都是优秀的工具，至于使用哪种工具最好，则取决于你的具体需求和限制条件。
JS 我们会用 Webpack、Terser 进行 Tree Shking，而 CSS 会用 PurgeCss。...PurgeCss 会分析 html 或其他代码中 css 选择器的使用情况，进而删除没有被使用的 css。 是否对 PurgeCss 怎么找到无用的 css 的原理比较好奇呢？...这就是 purgecss 的实现思路。我们来写下代码。 代码实现 我们来写一个 postcss 插件来做这件事情，postcss 插件就是基于 AST 做 css 的分析和转换的。...的实现思路已经通了，不是么～ 总结 JS 的 TreeShking 使用 Webpack、Terser，而 CSS 的 TreeShking 使用 PurgeCss。...我们实现了一个简易版的 PurgeCss 来理清了它的实现原理： 通过 html 提取器提取 html 中的选择器信息，然后对 CSS 的 AST 做过滤，根据 Rule 的 selector 是否被使用到来删掉没用到的
也就是UI设计和前端应该使用一致的设计规范。...为了解决这个问题，Tailwind CSS 内置了与 PurgeCSS 的集成，PurgeCSS 是一个用于删除未使用 CSS 的工具。...在生产构建过程中，PurgeCSS 扫描我们的文件并丢弃任何未使用的类，从而产生一个精简、性能优化的 CSS 文件。 插件架构 Tailwind CSS 的插件架构增加了其可扩展性和定制能力。...注意：在使用prettier-plugin-tailwindcss时，会和prettier有版本兼容性问题。 4....但是，如果我们使用的是 Tailwind 的旧版本，则需要为构建执行额外的优化——可以使用 PurgeCSS，这是一种用于删除未使用 CSS 的工具。
包体的大小 webpack和rollup对比 webpack算是使用程序员使用最多的打包工具，面试中往往会问到webpack的相关问题，而rollup被问到的要少很多。...导致这种现象的一个原因是，「应用开发使用webpack，库开发使用rollup」的说法。...这次算是一个打包的实验，我们使用两个工具都对这个项目打一次包。 使用webpack打包 在打包之前，需要给package.json文件中添加或更改一些字段。...new MiniCssExtractPlugin({ filename: "main.min.css" // 提取后的css的文件名 }) ], } 本来应该写「开发和生产...使用rollup打包 在rollup中使用的库比较多一点。
如何使用tailwindcss自定义hugo主题 如何使用tailwindcss自定义hugo主题?对于某些主题，可能作者开发时候，它不具备自定义指定css的功能，但这并不妨碍我们自己添加这个功能。...tailwindcss的主题，其实完成前两步就好了，但是对于使用了tailwindcss的主题，由于它还有一个编译的过程，根据你指定的content内容的匹配目录，如./**/*....以我举例的这个使用tailwindcss做为样式定义的package来说明，因为这是对hugo主题进行修改，所以这里就头脑中要有个概念，就是hugo是基于golang的一套系统，但是你在模板引擎内使用的语法已经剥离了...但是这些交互都还没有把交互拉进一个里程碑的时代，直到avalon、vue、react之类支持模型绑定的前端开发包的出现，它把“模型”和“视图”拉的更近了。...当然tailwindcss的使用过程还是有很多技巧的，我自己也在摸索中，有什么新的想法再写文章分享。今天这篇有关如何使用tailwindcss自定义hugo主题的文章至此分享结束，感谢阅读。
Webpack + Babel 在webpack中使用Babel通过使用babel-loader即可，babel中的配置可以通过options选项进行配置。...+ Sass 在Webpack中对Sass进行编译需要使用sass-loader，而sass-loader依赖于node-sass和webpack，因此需要安装 npm i node-sass sass-loader...webpack -D 由于sass没有提供重写url的功能，因此所有的链接资源都是相对于输出文件（output）来说的，因此在实际开发中通常会加入resolve-url-loader来实现资源url的正常使用...npm i resolve-url-loader -D 和style-loader、css-loader一起使用，这样就可以正常使用编译sass了 const config = { // .......sourceMap' ] }] } }; module.exports = config; Webpack + Less 类似于Sass的使用，Less的编译只需要安装less-loader
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
