记一次 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: [],
}

配置 Vite 支持用 “@” 路径别名导入文件

需要做如下两步配置。

1、让 vite 能识别 @ 路径别名

vite.config.js 增加:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { resolve } from 'path';

export default defineConfig {
// ...
resolve: {
alias: {
"@": resolve(__dirname, 'src'), // vite 编译的路径别名
},
// extensions: ['.js', '.json', '.ts'], // 使用路径别名时省略后缀名编译时补全,默认值为 ['.js', '.json', '.ts']
}
// ...
}

2、让 IDE 能识别 @ 路径别名

用 @ 路径别名导入文件后,IDE (如 jetbrains 家的)要能识别导入路径,实现代码提示识别,点击导入变量或导入路径能跳转到文件。

在根目录下的 jsconfig.json 加入以下内容:

1
2
3
4
5
6
7
8
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

Vue3 组合式 API 使用 i18n 实现本地化

Vue3 使用选项式 API 较容易,按文档上手就行,这里就不多说。组合式 API 上手会比较麻烦一点。

创建实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// app.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
locale: 'cn', // 设置当前语言
legacy: false, // 要支持组合式API,此项必须设置为false;
// globalInjection: true, // 全局vue视图中注册$t方法,vue-i18n v9.2 之后默认是 true
messages: {
cn: {
message: {
hello: '你好',
},
},
en: {
message: {
hello: 'hello',
},
},
},
});

const app = createApp(App);
app.use(i18n);
app.mount('#app')

基本使用

1
2
3
4
5
6
7
8
9
10
<!-- App.vue -->
<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n(); // 组合式 API 使用 vue-i18n,关键是 createI18n 的 legacy 参数要设置成 false
console.log(t('message.hello'));
</script>

<template>
<div>在视图中使用语言: {{ $t('message.hello') }}</div>
</template>

自定义全局方法使用 vue-i18n

组合式 API 每次要 import 又要导出要用的函数,需要频繁使用,这样太麻烦了。
我们可以定义 window.$t 全局函数,这样在 setup 中也能直接用 $t()取得语言信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// app.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
locale: 'cn',
messages: {
cn: {
hello: '你好',
},
en: {
hello: 'hello',
},
},
});

window.$t = function() {
return i18n.global.t(...arguments);
}

const app = createApp(App);
app.use(i18n);
app.mount('#app')

备注

更多用法见官方文档: https://vue-i18n.intlify.dev/guide/

Vite缩小打包体积:使用 visualizer 分析文件依赖关系与文件大小

Vite 中用 manualChunks 分割打包时,找文件依赖很麻烦,用 rollup-plugin-visualizer 可以帮我们找出依赖关系、分析依赖包的大小。

安装插件 rollup-plugin-visualizer

pnpm i -D rollup-plugin-visualizer

使用插件

vite.config.js 中添加:

1
2
3
4
5
import { visualizer } from 'rollup-plugin-visualizer';

plugins:[
visualizer({ open: true }) // 使用依赖分析,open: true 开启编译完成后自动弹出分析结果 html 页面
]

分析结果

执行 pnpm build,编译完成后,会在浏览器中自动打开下面的页面:

visualizer

ElementPlus 开发 SPA 应用 dev 模式加载太慢的原因及解决办法

问题复现

开发 SPA 应用用到 ElementPlus,官方推荐用 自动导入 方式来引用。

如果你用笔记本开发,那么预览时 js 的加载速度会极慢,node 占 CPU 超过100%,非常影响开发体验,恨不得换到 MPA 模式开发。

原因

因为自动自动导入方式预览时,要加载一百多个js文件。如果你用的是强劲的台式机,用这个方式没发现有明细的卡。笔记本 CPU 顶不住。

解决办法

完整引入按需导入 就没这个问题。

建议使用 完整引入 方式,ElementPlus 相关 js 就只引入了一个 /node_modules/.vite/deps/element-plus.js,而不是自动导入的上百的js文件。

编译后 element-plus 后的 js gz 后需要多传输 100k 左右,如果你受不了,可以另外加一个自动加载的 vite 配置,在增加一个创建不用全局引入 ElementPlus 的入口文件给 vite 引用。

如:build 时使用 vite.build.js 配置,在 vite.build.js 中引用使用 自动导入 的js入口文件。再把 package.jsonscripts.build 改为 vite build --config vite.build.js,这样就可以实现 dev 时使用完整引入ElementPlus,build 时使用自动导入减少编译文件的大小。

使用 Dexie.js 简化访问浏览器本地数据库 IndexedDB

localStorage 本地存储各家浏览器分别限制在 2.5M ~ 10M 之间,本地浏览器需要存储较大数据的时候就不能用了, IndexedDB 就能解决这个问题。

IndexedDB 是存储结构类似 MangoDB 的对象存储数据库,不是关系型数据库。 IndexedDB API 稍微有点麻烦,用 Dexie.js 可简化操作。

阅读更多

在 Vue3 <script setup> + 组合式 API 之 怎用使用响应式变量

什么是响应式?

Vue3 的响应式是:当更改响应式对象的值改变时,视图会随即自动更新。

ref()

ref() 返回一个响应式对象,可以用 value 属性来访问或更改对象的值。
ref 对象在模板中会自动解包,用变量名不需要加 .value 就能访问。

1
2
3
4
5
6
7
8
9
10
11
<script setup>
import { ref } from 'vue';

const say = ref('hi'); // 定义值为 hi 的响应式变量 say
say.value = 'hello'; // 把 say 的值改为 hello
</script>

<template>
<!-- 自动解包,不需要些成 {{ say.value }} -->
<p>{{ say }}</p>
</template>

reactive()

阅读更多

Vue3(单文件组件 + <script setup> + 组合式 API)组件实例常用内置属性、方法、函数

本文总结 Vue3 组件实例在模板中暴露的常用公共属性和方法,以及对应的 组合式 API 函数。

$data/$props/$options 属性在 组合式 API 下几乎用不到。
$el 不建议用。
$slots 表示父组件所传入插槽的一个对象,很少用,有兴趣可查看官方文档

$parent

模板中用 $parent 获取父组件实例,可访问父组件用 defineExpose() 显式暴露的绑定。

组合式 API 先在 setup 中用 getCurrentInstance() 获取到当前组件实例,再用 parent 属性访问父组件。getCurrentInstance().parent 除了能访问父组 defineExpose() 暴漏的绑定外,能访问父组件更多的属性和方法,多用于组件的开发,在应用开发中一般不建议用。

1
2
3
4
5
import { getCurrentInstance } from 'vue';

const parent = getCurrentInstance().parent; // 获取父组件的实例
parent.exposed // 访问父组件 defineExpose() 暴露的绑定
parent.refs // 父组件中的模板引用,在模板中用 $parent.$refs

$root

阅读更多

JavaScript 原型方法:call、apply、bind

callapplybind 是 JavaScript 函数的原型方法,用于改变函数的 this 指向来执行函数。一般这种鬼操作能不用则不用,没得选的时候才有必要用。

  • apply() 调用一个具有给定 this 值的函数,以及以一个数组(或一个类数组对象的形式提供的参数
  • call() 使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数
  • bind() 创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const bar = {
name: 'johnny'
};
function foo (age, hobby) {
console.log(this.name, age, hobby);
}

// apply 和 call 作用相同,传参方式不同
foo.apply(bar, [28, 'sleep']); // johnny 28 sleep
foo.call(bar, 28, 'sleep'); // johnny 28 sleep

// 先绑定对象返回一个函数
const bindBar = foo.bind(bar);
bindBar(28, 'sleep'); // johnny 28 sleep

参考:深入理解JavaScript——call、apply、bind三大将

JavaScript 箭头函数与 function 函数的区别

见过箭头函数后,知道箭头函数是 function 定义函数的简写,然后还有一点是箭头函数中的 this 是上级代码的 this
其实除了这两点外,箭头函数和 function 函数还有很多区别。

1、基本语法

1
2
3
4
5
6
7
8
9
10
11
12
// 没有参数时
() => {
// code ...
}
// 有参数时
(param1, param2, ..., paramN) => {
// code ...
}
// 只有1个参数时,圆括号可以省略
param => {
// code ...
}

2、this 指向

  • 顶级代码中, this 指向 window 对象;
  • function 定义的函数中, this 指向该函数的对象;
  • 箭头函数中,箭头函数不会创建自己的 this,始终指向箭头函数所在作用域下的 this

用原型方法 apply()call()bind() 不能改变箭头函数中 this 的指向。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const bar = {
name: 'johnny'
};
function foo () {
console.log(this.name);
}

const fa = () => {
console.log(this.name);
};

// bar 作为 foo() 实例的 this
foo.call(bar); // johnny
fa.call(bar); // TypeError: Cannot read properties of undefined (reading 'name')

3、箭头函数不能做构造函数

阅读更多