vite工程化-常用配置

1.高效的Vite

Vite开发阶段基于浏览器的原生ESM支持实现了no-bundle服务，借助Esbuild对第三方包进行打包，速度极快！

• vite可以将Commjs转为ESM格式
• 可以加载各类静态资源（图片、svg、Worker等）
• 产物打包是基于Rollup实现生产环境打包

在vite项目中index.html是一个入口文件，一个import即代表一个HTTP请求。no-budle就是利用浏览器的原生ES模块支持。实现开发阶段的Dev Server，进行模块的按需加载。

CSS工程化解决方案

1.CSS预处理 包括sass less stylus

pnpm i sass -D

在vite中本身对各种预处理器做了内置处理，所以不需要配置

2.全局引入sass文件

比如你有一个sass文件variables.scss

配置vite.config.js 文件

import { defineConfig, normalizePath } from 'vite'
// 全局的scss文件路径
const normalizePathSrc = normalizePath(path.resolve('./src/style/variable.scss'))
export default defineConfig({
  root: path.join(__dirname, 'src'),
  plugins: [react(), viteEslint()],
  //css 相关配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "${normalizePathSrc}"`
      }
    }
  },
})

经过上面的配置这样你可以在其他的文件中不需要@import语句引入，就可以直接使用变量

3.autoprefixer为不同浏览器添加前缀

npm i autoprefixer // vite.config.ts 增加如下的配置 import autoprefixer from 'autoprefixer';

import autoprefixer from 'autoprefixer';
export default {
  css: {
    // 进行 PostCSS 配置
    postcss: {
      plugins: [
        autoprefixer({
          // 指定目标浏览器
          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
        })
      ]
    }
  }
}

Vite中静态资源处理

1.路径的类型别名

import path from 'path';

{
  resolve: {
    // 别名配置
    alias: {
      '@': path.join(__dirname, 'src')
    }
  }
}

2.图片压缩 vite-plugin-minipic

github.com/60late/vite…

预构建

为什么需要预构建？

1.很多第三包他是没有ESM格式版本的产物，Commjs在Vite中无法直接运行

2.请求瀑布流问题，一个import代表一个请求，如果文件嵌套很深，或者请求次数很多就会拖慢应用程序的加载速度，经过预构建后会将第三方包合到一起，减少HTTP请求数量

开启预构建

两种方法 ：自动开启 手动开启

自动开启 ： 在项目启动后node_module文件中有vite文件里面就是预构建的文件 并且Vite将这些文件进行了缓存 时间1年

手动开启： 删除node_module/vite文件 将optimizeDeps.force 设为true

配置项

  //设置为 true 可以强制依赖预构建，而忽略之前已经缓存过的、已经优化过的依赖。
  optimizeDeps: {
    // 手动开启预构建
    force: true,
    // 指定需要构建入口文件  只要存在import语句vite都可以解析扫描到项目需要的依赖
    entries: ['./src/main.tsx'],
    //添加依赖
    include: [],
    //排除预构建的依赖
    exclude: [],
    //Vite 提供了`esbuildOptions` 参数来让我们自定义 Esbuild 本身的配置，常用的场景是加入一些 Esbuild 插件:
    esbuildOptions: {
    }
  }

如果exclude出现报错，可能是某个依赖所依赖的产物没有ES格式，需要放到include预构建，转为ESM格式的产物。