标签: Vite - 全栈潘哥

2024-03-01发表2024-04-21更新前端 / JavaScript

需要做如下两步配置。

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-04-21更新前端 / 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

使用插件

分析结果

分类

归档

最新文章

标签