记一次 tailwind @apply 编译速度极慢的解决过程

新的 Vue 项目使用了 Tailwind + SCSS,突然发现修改 app.scss 文件的时候,热更新需要 14s+ 才能加载完成。和之前项目唯一不同的是scss的 @import 换成了 @use,这地方应该没问题,sass 团队不可能会犯这么低级的错误。

突然想起,前两天把 128k 的地区数据 regions.js 放 src 目录下了,很有可能是这个引起的。试着把该文件移出 src 目录,还真是。解决:把该文件改为 json 格式,放到 assets 目录。

默认的 tailwind 配置会扫描源码目录下的 vue,js,ts,jsx,tsx 文件,js 文件过大太复杂的时候就会引起问题了。我项目只有 vue 文件需要taiwnid 扫描,把其他后缀去掉,热加载速度明显快很多。配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
// "./src/**/*.{vue,js,ts,jsx,tsx}",
"./src/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}

记一次 tailwind @apply 编译速度极慢的解决过程

https://coderpan.com/front-end/tailwind-build-slow.html

作者

CoderPan

发布于

2024-07-17

更新于

2024-07-18

许可协议

评论