标签: Vite - 全栈潘哥

2024-07-17发表2024-11-17更新前端 / Tailwind

新的 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 扫描，把其他后缀去掉，热加载速度明显快很多。配置如下：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    // "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./src/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2024-03-01发表2024-11-17更新前端 / JavaScript

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

需要做如下两步配置。

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

vite.config.js 增加：

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 加入以下内容：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2023-07-25发表2024-11-17更新前端 / Vite

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

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

安装插件 rollup-plugin-visualizer

pnpm i -D rollup-plugin-visualizer

使用插件

在 vite.config.js 中添加：

import { visualizer } from 'rollup-plugin-visualizer';

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

分析结果

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

visualizer

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

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

安装插件 rollup-plugin-visualizer

使用插件

分析结果

分类

归档

最新文章

标签