vite

使用vite原因：

主要原因是现在已有的打包工具如webpack,rollup等使用javascript打包工具会有很大的性能问题，需要很长时间才能启动服务器，所以vite就出现了。
Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

使用vite创建react+ts项目

yarn create vite app 安装过程可以选react 或者 react + ts
cd app 
yarn

base 配置打包公共路径

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react';

export default defineConfig({
  base: './',
  plugins: [react()]
})

可以查看生成的html文件，文件的引入的路径与base设置的路径相关。

alias配置别名

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react';
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@comp': resolve(__dirname, 'src/components')
    }
  },
  plugins: [react()]
})

配置之后发现在App中使用，会出现路径错误，还需要在tsconfig.json文件中加入baseUrl,paths配置才能生效。

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"]
    }
  },
}

构建生产版本移除log打印

// vite.config.ts
export default defineConfig({
  ...
  build: {
    minify: 'terser', // 默认为esbuild
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境移除console
        drop_debugger: true // 生产环境移除debugger
      }
    }
  },
  ...
})

打包输出文件夹配置

使用build脚本运行可以看到dist文件夹下面会出现一些vite打包好的文件，这些文件没有做整理，我们使用配置时输出文件更规范。

配置：

// vite.config.ts
...
export default defineConfig({
  build: {
    ...
    rollupOptions: {
      output: { // 配置输出文件夹
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]'
      }
    }
  },
  ...
})

重新打包可以看到输出文件被整理到对应的文件夹中：

mock数据

安装插件包：

yarn add -D vite-plugin-mock mockjs

配置vite:

// vite.config.ts
...
// 引入Mock插件
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  ...
  plugins: [
    ...
    viteMockServe({
      // 数据模拟
      mockPath: 'mock'
    })
  ],
  ...
})

mock接口数据,mock文件夹新建index.ts文件

import { MockMethod } from 'vite-plugin-mock';
import { mock } from 'mockjs';

const info = mock({
  // 'name|10': [() => Random.cname()] // 第一种方法
  'name|3': ['@cname'], // 第二种方法，无区别
});
export default [
  {
    url: '/api/get',
    method: 'get',
    response: ({ query }) => {
      return {
        code: 200,
        info,
      };
    },
  },
] as MockMethod[];

在app.tsx中调用mock数据：

function App() {
  async function fn() {
    const { data } = await axios.get(import.meta.env.VITE_BASE_API as string);
    console.log(data);
  }
  fn();

  return (
    <div className="App">
      App
      <Hello />
    </div>
  );
}

配置开发环境和生产环境变量

// .env.development(新建配置文件）

VITE_BASE_API = '/api/get'

//.env.production(新建配置文件）

VITE_BASE_API = 'https://v1.hitokoto.cn/?c=f&encode=text'

在App.tsx文件中获取配置文件内容， 通过此方法就可以根据不同环境拿到不同的配置变量：

function App() {
  async function fn() {
    const { data } = await axios.get(import.meta.env.VITE_BASE_API as string);
    console.log(data);
  }
  fn();

  //...
}

cdn引入 (Todo)

这个插件是专门打包发布阶段使用的，开发阶段并没有什么用

安装cdn插件：

yarn add vite-plugin-cdn-import -D

Gzip压缩

//安装插件
yarn add vite-plugin-compression -D

// vite.config.ts
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  ...
  plugins: [
  ...
  viteCompression(), // GZIP压缩
  ...
  ]
})

打包图片

yarn add vite-plugin-imagemin -D

// vite.config.ts
// 引入图片压缩插件
...
//安装插件
import viteImagemin from 'vite-plugin-imagemin'


// vite.config.ts
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
            }
          ]
        }
    })
  ]
})