vite理解与配置_vite babel

初识vite

• 前言：最近项目要从vue2.x迁移到vue3，于是借此机会打算重构整个项目。在搭建项目的时候发现vue3更新了构建方式，放弃了webpack，使用了新的构建机制vite。再经过一番了解后发现vite借助了esbuild与rollup。

• vite开发大致分两个阶段

  1. 开发阶段：
     vite采用no-bundle的方式,借助现代浏览器支持了esmodule的能力，在开发阶段项目无需打包即可运行调试，这让开发编译速度得到很大提升。
  2. 生产阶段：
     为了在生产环境中获得最佳的加载性能，不能完全 no-bundle，且由于rollup 对于代码的 tree-shaking 和 ES6 模块有着算法优势上的支持，项目只需要打包出一个简单的bundle包，于是vite打包借助了rollup来用来实现代码分割、tree-shaking等操作，并且vite的插件机制是借鉴rollup来实现的。

• esbuild的作用

  1. 依赖预构建，esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
  2. 加速文件编译,如webpack等以往的编译工具需要借助babel,tsc等工具编译代码，速度相对较慢，在利用esbuild后避免了terser、babel重复解析的问题，可以大大加快快速编译速度
  3. 代码压缩,vite统一采用esbuild,共用ast树只进行一次解析，解决了terser 和 babel 单独使用了ast造成的重复编译问题。

• rollup的作用：

  现代浏览器基本支持了esmodule，考虑到要在生产环境获得最佳的加载性能，vite在生产环境使用rollup来进行打包构建，由于vite的插件机制是借鉴rollup来实现的，使得rollup大部分插件可以直接在vite中使用，可以说是双向奔赴了

vite基本配置

当以命令行方式运行 vite 时，vite 会自动解析项目根目录下名为 vite.config.js 的文件。以下是基础的配置文件：

1. IDE智能提示

通过 IDE 和 jsdoc 的配合来实现智能提示

// vite.config.js
/** @type {import('vite').UserConfig} */  
export default {  
    // 一些自定义基础配置  
}  
1
2
3
4
5

使用工具函数 defineConfig

import { defineConfig } from 'vite';  
export default defineConfig({
    // 一些自定义基础配置
})
1
2
3
4

2. 开发/生产环境情景配置

使用defineConfig工具函数并以箭头函数作为callback函数接收command, mode, ssrBuild来获取一些基本参数，用于区分环境亦或者是一个 SSR 构建（ssrBuild）

// vite.config.js 

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // dev 独有配置
    }
  } else {
    // command === 'build'
    return {
      // build 独有配置
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 引入路径配置

路径配置可以自定义配置或者借助插件

1. 自定义配置

   // vite.config.js
   
   import { defineConfig } from 'vite';
   import path from 'path';
   export default defineConfig({
       resolve: {
           alias: {
           '@': path.resolve(__dirname, './src') // 路径别名
           }
       }
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

   假如你的项目使用 typescript 进行开发,则需要在 tsconfig.json 文件中配置paths，否则IDE引入路径飘红

   // tsconfig.json
   {
       "paths": {
           "@src/*": ["./src/*"],
           },
       "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"] // 编译对以下文件进行ts检测
       "exclude": ["dist", "node_modules"] // 编译排除以下文件ts检测
   }
   1
   2
   3
   4
   5
   6
   7
   8

2. 使用 vite-aliases 插件
   默认别名示例：src -> @src; hooks -> @hooks,即使用@符号作为前缀

   import { defineConfig } from 'vite';
   import { ViteAliases } from 'vite-aliases';
   
   export default defineConfig({
       plugins: [
           ViteAliases()
       ]
   })
   
   1
   2
   3
   4
   5
   6
   7
   8
   9

   使用/引入路径示例：

   import xxx from ‘@src/xxxx’;
   import xxx from ‘@hooks/xxxx’;

4. CSS样式预处理

vite虽然内置了css预处理器,如需要按需引入则需要手动引入css工具

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '/xxx/xx.scss;` // 引入全局变量文件
      }
    },
  },
1
2
3
4
5
6
7

5. 本地调试代理流量转发

export default defineConfig({
    server: {
        host: true, // 对所有地址进行监听
        proxy: {
            // 字符串 
            '/foo': 'http://localhost:8080',  

            // 选项写法
            '/api': {
                target: 'http://xxxx.xxxx.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            },  

            // 正则表达式写法  
            '^/fallback/.*': {
                target: 'http://xxxx.xxxx.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/fallback/, '')
            },
        }
    }，
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

vite服务入口模版

vite默认引用外部index.html,在里面通过type="module"实现ES Module注入模版，如果需要调整则需要在 vite.config.js 添加root属性，也可以配置 build 属性（支持多入口）。

修改root

import { defineConfig } from 'vite';
export default defineConfig({
    root: 'src/packages/index/', // 模版路径
})

1
2
3
4
5

多入口配置尝试

rollup打包并不允许相对路径的存在，多入口需要配置不同的npm scripts命令来进入不同的入口（即使这么做是没意义的），试着探索一下可行性，于是有了以下操作：

1. vite.config.js

import { defineConfig } from 'vite';
export default defineConfig({
    build: {
        rollupOptions: {
            input: {
                mono1: path.resolve(__dirname, 'src/packages/template1/index.html'),
                mono2: path.resolve(__dirname, 'src/packages/template2/index.html'),
            },
        },
    },
})
1
2
3
4
5
6
7
8
9
10
11

2. package.json 启动脚本配置

// package.json

"scripts": {
    "mono1": "vite serve src/packages/template1/ --config ./vite.config.ts",
    "mono2": "vite serve src/packages/template2/ --config ./vite.config.ts",
}
1
2
3
4
5
6

静态资源管理

1. vite对大多数静态资源类型进行了内置处理,如果还有不支持的通过assetsInclude添加支持.
2. 静态资源体积 >= 4KB时会提取成单独的文件, < 4KB时则作为 base64 格式的字符串内联
3. 通过build.assetsInlineLimit自定义配置
4. svg属于html类型文件，始终打包成文件
5. 图片压缩,可借助vite-plugin-imagemin插件

import { defineConfig } from 'vite';
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
    plugins: [
      viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false
        },
        optipng: {
          optimizationLevel: 7
        },
        mozjpeg: {
          quality: 20
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox'
            },
            {
              name: 'removeEmptyAttrs',
              active: false
            }
          ]
        }
      })
    ],
})
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
27
28
29
30
31
32
33
34

后记

这是我第一次写关于vite的文章，由于个人水平有限，也是刚接触到vite，而且每个人的观点和方法可能都存在差异。因此文章中难免会有不严谨甚至不正确的地方，并且每个人的开发环境略有差别，可能会导致代码表现差异，如有发现，欢迎大家指出来并多多交流。