0


vite理解与配置

初识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 {  
    // 一些自定义基础配置  
}  

使用工具函数 defineConfig

import { defineConfig } from 'vite';  
export default defineConfig({
    // 一些自定义基础配置
})
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 独有配置
    }
  }
})
3. 引入路径配置

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

  1. 自定义配置// vite.config.jsimport { defineConfig } from 'vite';import path from 'path';export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src') // 路径别名 } }})假如你的项目使用 typescript 进行开发,则需要在 tsconfig.json 文件中配置paths,否则IDE引入路径飘红// tsconfig.json{ "paths": { "@src/*": ["./src/*"], }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"] // 编译对以下文件进行ts检测 "exclude": ["dist", "node_modules"] // 编译排除以下文件ts检测}
  2. 使用 vite-aliases 插件 默认别名示例:src -> @src; hooks -> @hooks,即使用@符号作为前缀import { defineConfig } from 'vite';import { ViteAliases } from 'vite-aliases';export default defineConfig({ plugins: [ ViteAliases() ]})使用/引入路径示例:> import xxx from ‘@src/xxxx’;> import xxx from ‘@hooks/xxxx’;
4. CSS样式预处理

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

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '/xxx/xx.scss;` // 引入全局变量文件
      }
    },
  },
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/, '')
            },
        }
    },
  },
})

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/', // 模版路径
})
多入口配置尝试

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'),
            },
        },
    },
})
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. 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
            }
          ]
        }
      })
    ],
})

后记

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

标签: 前端 javascript vue

本文转载自: https://blog.csdn.net/zhianwang/article/details/128938823
版权归原作者 小安同学呀 所有, 如有侵权,请联系我们删除。

“vite理解与配置”的评论:

还没有评论