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

前言

随着后续引用的组件越来越多，如果你的电脑性能不高，运行项目时按需加载组件会耗时很久。而针对于这个情况，也有相对应的插件来解决这个问题

推荐阅读

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

vite.config.ts 之 Plugins 篇 (五)

启动优化

vite-plugin-optimize-persist

Vite 的依赖预优化很酷，可以大大提升 DX。虽然 Vite 可以智能地检测动态依赖关系，但它的按需自然有时会使复杂项目的启动变得非常缓慢。从开始启动到完成花费了大约7分支左右，因为电脑性能不是很高加载依赖就会慢下拉。

您可能知道，您可以显式设置依赖项，optimizeDeps.include以便在服务器第一次启动时对其进行优化。当您的项目变得更加复杂时，这可能会有点费力。

• 安装

# 选择一个你喜欢的包管理器

# NPM
npm install vite-plugin-optimize-persist vite-plugin-package-config -D

# Yarn
yarn add vite-plugin-optimize-persist vite-plugin-package-config -D

# PNPM
pnpm install vite-plugin-optimize-persist vite-plugin-package-config -D

• 配置

// config\plugins\index.ts
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'
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'],
    }),
    PkgConfig(),
    OptimizationPersist(),
  ]
  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
}

使用vite-plugin-optimize-persist，它将保留您的动态依赖项的名称，package.json因此您和您的团队下次不需要被它们打扰。

再次重新运行项目，你会发现项目启动非常快，控制台也不会出现寻找依赖的信息了。

运行

npm run dev 

打包

npm run build 

2022/2/19日更新Vue、Vite、Element-Plus最新版本

{
  "name": "admin-vite",
  "private": true,
  "version": "0.0.5",
  "author": {
    "name": "SunHongYu",
    "email": "17600616235@163.com",
    "url": "https://juejin.cn/"
  },
  "resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
  },
  "scripts": {
    "bootstrap": "pnpm install",
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "npm run build && vite preview",
    "preview:dist": "vite preview",
    "clean": "rimraf node_modules",
    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite"
  },
  "dependencies": {
    "element-plus": "^2.0.2",
    "vue": "^3.2.31"
  },
  "devDependencies": {
    "@vitejs/plugin-legacy": "^1.7.1",
    "@vitejs/plugin-vue": "^2.2.0",
    "@vue/compiler-sfc": "^3.2.31",
    "consola": "^2.15.3",
    "typescript": "^4.5.5",
    "unplugin-auto-import": "^0.6.1",
    "unplugin-vue-components": "^0.17.21",
    "vite": "^2.8.2",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-imagemin": "^0.6.1",
    "vite-plugin-optimize-persist": "^0.1.2",
    "vite-plugin-package-config": "^0.1.1",
    "vite-plugin-style-import": "^2.0.0",
    "vite-plugin-vue-setup-extend": "^0.4.0",
    "vue-global-api": "^0.4.1",
    "vue-tsc": "^0.31.2"
  },
  "vite": {
    "optimizeDeps": {
      "include": [
        "element-plus/es",
        "element-plus/es/components/button/style/css",
        "element-plus/es/components/link/style/css",
        "vue",
        "vue-global-api"
      ]
    }
  }
}

继续学习

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

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