Vite配置

vite

vite 可以说是开箱即用，不用过多配置

vite 利用ESM，不像webpack构建工具取分析引入，打包构建；而是直接保持模块化，省去编译时间，代码更改后构建速度提升

构建生产环境下，使用了rollup

处理资源

• 天生支持css以及预处理语言
• 支持TS
• 能处理各种资源

处理图片base64

build: {
    assetsInlineLimit: 20000, //base64
  }

特殊语言

vue文件 使用插件 @vitejs/plugin-vue

plugins: [vue()]

jsx 使用插件@vitejs/plugin-vue-jsx

 plugins: [
    vueJsx({}),
  ]

代码分割

vite 会自动分割异步引入的代码，第三方库或者特殊需要拆分的需要 rollup 的 manualChunks

rollup 的配置需要写在 rollupOptions 中
两种方式：

• 一个一个写

manualChunks: {
    vendor:["vue"] // 直接写入
}

• manualChunks 写成函数

  manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        }

其它好用的插件

• vite-plugin-mock - 用于本地及开发环境数据 mock
• vite-plugin-html - 用于 html 模版转换，可以在html文件内进行书写模版语法
• vite-plugin-style-import - 用于组件库样式按需引入
• vite-plugin-imagemin - 用于打包压缩图片资源
• vite-plugin-theme - 用于在线切换主题色/黑暗主题适配等主题相关配置
• vite-plugin-compression - 用于打包输出.gz|.br文件
• vite-plugin-svg-icons - 快速生成 svg sprite
• vitejs-plugin-legacy - 用于向下兼容语法
• unplugin-auto-import - 自动引入