nuxt3使用记录六:禁用莫名其妙的Tailwind CSS(html文件大大减小)

发现这个问题是因为,今天我突然很好奇,我发现之前构建的自动产生的200.html和404.html足足290k,怎么这么大呢?不是很占用我带宽?

一个啥东西都没有的静态页面,凭啥这么大!所以我就想着手动把他改了,随便返回个page not found就行了

于是我就用编辑器打开这个文件,就好奇是啥玩意这么大,此时看到很奇怪的一个style引用:

我也没引用这玩意呀,怎么打包个页面,还把开源协议MIT License都给带上,嫌我文件不够大吗?

我全局搜索我的项目,都没有引用这玩意!

于是我就试着把它删掉(删掉后页面直接从290k 减到2k,我已经怀疑他把整个css给打包进来了!否则怎么连开源协议都有),看看对页面有啥影响,结果,毫无影响!

然后我检查每个html文件,结果每个文件都有它!

然后我记得在官网看过它,去搜索,果然,这些nuxt自带的一个样式,不过没说为啥要引用他。

然后摸索中,我发现每次运行项目时,都会提示:

Using default Tailwind CSS file                                                                                                                                              nuxt:tailwindcss 20:17:10
  ➜ DevTools: press Shift + Alt + D in the browser (v1.1.5)                     

ℹ Tailwind Viewer: http://localhost:10000/_tailwind/ 

平时没注意看,这时候看,猜测是nuxt的默认配置就会加载这玩意,关键我想不明白一个css,为啥要默认加载呢?我的整个页面都没依赖它的样式呀!

然后去nuxt官网Tailwind CSS的官网里找关掉它的方法,几经尝试,终于找到:

ts 复制代码
export default defineNuxtConfig({
    tailwindcss: {
        cssPath: false,
    },
    .......
})

这样打包之后就没玩意了,测试发现对项目没啥影响。

此时再运行项目,它的提示是:

No Tailwind CSS file found. Skipping...                                                                                                                                      nuxt:tailwindcss 20:25:44
  ➜ DevTools: press Shift + Alt + D in the browser (v1.1.5)         
                                       
ℹ Tailwind Viewer: http://localhost:10000/_tailwind/ 

看到是跳过了这玩意,所以nuxt3这玩意,还有很多可以琢磨的地方,50k star的成熟项目也有不成熟的地方嘛

其实我发现打包文件里还有冗余,比如图片中tailwindcss v3.4.3下面那个style,也不是我写的,我试着删掉,发现对项目也没影响,而且也是每个html文件都有。但是还不知道怎么去掉它。继续琢磨

相关推荐
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
爱上语文5 小时前
HTML和CSS 表单、表格练习
前端·css·html
小肚肚肚肚肚哦6 小时前
盘点浏览器盒模型中各种 width、height 、边距和位置属性
css·html
NightCyberpunk6 小时前
HTML、CSS
前端·css·html
前端Hardy10 小时前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html
xiyusec12 小时前
HTML基础
前端·html
好开心3313 小时前
javaScript交互案例2
开发语言·前端·javascript·html·ecmascript·交互
前端熊猫16 小时前
transform学习
前端·学习·html
郑祎亦16 小时前
JavaWeb开发:HTML 页面与接口对接
前端·后端·java-ee·html
一秒美工助手18 小时前
鼠标经过遮罩效果 详情页阿里巴巴国际站外贸跨境电商装修运营 详情页装修无线端装修手机装修设计代码证书滚动特效效果代码,自定义内容代码模板模块设计设置装修
前端·javascript·html·计算机外设