本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

随着plugins配置越来越多会导致维护时不容易找到，awesome-vite中有很多优秀的插件。本章将对plugins配置进行优化，拆分出多个独立配置文件。

推荐阅读

• vite.config.ts 之 Plugins 篇 (三)

vite.config.ts 之 Plugins 篇 (四)

gzip配置

优化vite-plugin-compression插件，在plugins目录下新建compress.ts文件。
代码如下：

import compressPlugin from 'vite-plugin-compression'
export function configCompressPlugin(deleteOriginFile = false) {
  return compressPlugin({
    verbose: false, // 是否在控制台输出压缩结果
    disable: false, // 是否禁用
    threshold: 10240, // 文件容量大于这个值进行压缩，它将被压缩，单位为b
    algorithm: 'gzip', // 压缩算法 可选 ['gzip','brotliCompress' ,'deflate','deflateRaw']
    ext: '.gz', // 生成的压缩包后缀
    deleteOriginFile,
  })
}

imagemin配置

优化vite-plugin-imagemin插件，在plugins目录下新建imagemin.ts文件。
代码如下：

import viteImagemin from 'vite-plugin-imagemin'
export function configImageminPlugin() {
  const plugin = 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,
        },
      ],
    },
  })
  return plugin
}

styleImport配置

优化vite-plugin-style-import插件，在plugins目录下新建style.ts文件。
代码如下：

import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
export function configStyleImportPlugin() {
  return createStyleImportPlugin({ resolves: [ElementPlusResolve()] })
}

unplugin配置

优化unplugin-vue-components和unplugin-auto-import插件，在plugins目录下新建unplugin.ts文件。配置中指定了文件生成的路径，需要在library目录下新建文件夹unplugin，然后将根目录中auto-imports.d.ts和components.d.ts文件删除
代码如下：

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export function configAutoImportPlugin() {
  return AutoImport({
    imports: ['vue'],
    resolvers: [ElementPlusResolver({ importStyle: false })],
    // 指定文件生成路径
    dts: 'config/unplugin/auto-imports.d.ts',
  })
}
export function configVueComponentsPlugin() {
  return Components({
    // 用于搜索组件的目录的相对路径。
    dirs: ['src/components'],
    resolvers: [ElementPlusResolver()],
    // 指定文件生成路径
    dts: 'config/unplugin/components.d.ts',
    // 组件的有效文件扩展名。
    extensions: ['vue'],
    // 允许子目录作为组件的命名空间前缀。
    directoryAsNamespace: false,
    deep: true,
  })
}

index配置

优化createVitePlugins方法，build时加载压缩插件，后续如果在安装新的plugins依赖继续新建独立文件通过import引入在添加到plugins中。
代码如下：

import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
import { configCompressPlugin } from './compress'
import { configImageminPlugin } from './imagemin'
import { configStyleImportPlugin } from './style'
import { configAutoImportPlugin, configVueComponentsPlugin } from './unplugin'
export function createVitePlugins(isBuild: boolean) {
  const plugins = [
    vue(),
    vueSetupExtend(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
  ]
  if (isBuild) {
    // vite-plugin-compress
    plugins.push(configCompressPlugin())
    // vite-plugin-imagemin
    plugins.push(configImageminPlugin())
  }
  // vite-plugin-style-import
  plugins.push(configStyleImportPlugin())
  // unplugin-auto-import
  plugins.push(configAutoImportPlugin())
  // unplugin-vue-components
  plugins.push(configVueComponentsPlugin())
  return plugins
}

运行

npm run dev 

打包

npm run build 

生成目录

npm install --global treer
treer -e ./result.md -i "/node_modules|git|dist/"

本章最终目录如下：

├─index.html
├─package.json
├─pnpm-lock.yaml
├─README.md
├─tsconfig.json
├─vite.config.ts
├─src
|  ├─App.vue
|  ├─env.d.ts
|  ├─main.ts
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─public
|   └favicon.ico
├─config
|   ├─index.ts
|   ├─unplugin
|   |    ├─auto-imports.d.ts
|   |    └components.d.ts
|   ├─plugins
|   |    ├─compress.ts
|   |    ├─imagemin.ts
|   |    ├─index.ts
|   |    ├─style.ts
|   |    └unplugin.ts
├─.vscode
|    ├─extensions.json
|    └settings.json

继续学习

废话只说一句：码字不易求个👍，收藏 === 学会,快行动起来吧！🙇‍🙇‍🙇‍。

# Vite+Vue3+TypeScript+Element (五) 搭建企业级轻量框架实践