vite

1. vite介绍

Vite 是一种全新的前端构建工具，它极大地改善了前端开发体验。

● Vite 是一个web 开发构建工具，通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。

● 高性能:不用打包原生ESM文件；不管应用程序有多大，热更新速度都极快。

● 功能丰富:对于JSX、CSS、TypeScript等等都可以达到开箱就用。

2. vite和webpack对比

● webpack：分析依赖=>编译打包=>交给本地服务器进行渲染。随着模块增多，打包的体积变大，造成热更新速度变慢；

● vite：先启动开发服务器=>请求模块时按需动态编译显示。遵循ES Modules模块规范来执行代码，不需打包编译成es5模块即可在浏览器运行。项目越复杂、模块越多，vite的优势越明显；

● vite劣势：vite首屏和懒加载性能的下降；

3. vite整体架构-关键技术：

● 依赖预打包：避免node_modules过多的文件请求，将CommonJS格式转换为ESM格式；

● 单文件编译：使用esbuild编译ts/jsx时可以将编译速度提升10到100倍，缺点就是不支持类型检测和语法降级到 ES5；

● 代码压缩：使用压缩性能最高，效率最快的esbuild作为打包工具，极大的加快了打包速度，提高了开发效率；

● 插件机制：开发阶段-模拟rollup插件机制，生产阶段-直接使用rollup；

4. 搭建 Vite 项目

npm create vite@latest / yarn create vite

注意事项：Node.js 版本 >= 12.0.0。

5. 配置

webpack文件：webpack.config.ts

vite文件：vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  // index.html文件所在的位置 // 默认在项目最外层
  // root: '',
  // 开发或生产环境服务的公共基础路径-// 打包路径  默认: './' 
  // (1)空字符串或 ./（用于开发环境）(2)绝对 URL 路径名，例如 /Report/
  base: '/Report/',
  // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息。( 默认：true)
  clearScreen: false,
  // 插件
  plugins: [
    vue()
  ],
  // 解析相关
  resolve: {
    /* 使用路径别名时想要省略的后缀名*/
    extensions: [],
    // 路径别名
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  //本地运行配置，以及反向代理配置
  server: {
    // https: false, // 是否开启 https
    port: 9090, // 服务端口号
    open: false, // 是否自动打开浏览器
    cors: true, // 允许跨域
    // 自定义代理规则
    proxy: {
      '/api': {
        target: '****',
        // target: import.meta.env.VITE_BASE_API,
        changeOrigin: true, // 是否跨域
        rewrite: (path) => path.replace(/^/api/, '') // 重写接口的url
      }
    }
  },
  // 打包配置
  build: {
    outDir: 'dist', // 指定输出路径（相对于 项目根目录),默认'dist'
    assetsDir: 'assets', // 指定生成静态资源的存放路径（相对于 build.outDir）默认：'assets'
    // 传递给 Terser 的更多 minify 选项
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境去除console
        drop_debugger: true // 生产环境去除debugger
      }
    }
  },
  // css相关
  css: {
    /* CSS 预处理器 */
    preprocessorOptions: {
      scss: {
        // 引入 global.scss 这样就可以在全局中使用 global.scss中预定义的变量了
        additionalData: '@import "src/styles/global.scss";'
      }
    }
  },
  // json相关
  json: {},
  // esbuild相关
  esbuild: {},
  // 构建预览preview相关
  preview: {},
  // work相关
  worker: {}
})

vite相关介绍