数据大屏：vite是怎么用的

项目中使用 Vite 的性能优化实操

  1. 利用 Vite 的预构建特性：Vite 会自动对项目的依赖进行预构建（比如将 CommonJS 模块转为 ES 模块），在大屏项目中，我发现引入 ECharts 这种大依赖时，首次启动后后续热更新速度更快，不需要额外配置，Vite 会自动处理。
  2. 依赖缓存：Vite 会将预构建的依赖缓存到node_modules/.vite目录，我在项目中会注意如果依赖版本更新，会手动删除这个缓存目录，确保预构建的依赖是最新的。
  3. 静态资源处理：在大屏项目中，有很多图片、图标资源，Vite 会自动处理小于 4kb 的资源为 base64 格式（可通过build.assetsInlineLimit配置），减少了 HTTP 请求；对于大的图片资源，我会放在public目录下，通过绝对路径访问，避免 Vite 处理。
  4. 热模块替换（HMR）：开发时修改组件代码，Vite 只会更新修改的模块，不会刷新整个页面。比如在电商项目中修改商品列表组件，购物车组件的状态不会丢失，大大提升了开发效率。

项目中遇到的 Vite 相关问题及解决

  1. 问题

    ：在大屏项目中，引入第三方 UI 组件库（Element Plus）时，直接导入会导致打包体积过大。

    解决

    ：使用

    1
    unplugin-auto-import

    和

    1
    unplugin-vue-components

    插件实现按需引入，配合 Vite 的构建配置，打包体积减少了约 30%。

  2. 问题

    ：生产环境打包后，访问页面出现资源 404 错误。

    解决

    ：检查 Vite 的

    1
    base

    配置（默认是

    1
    /

    ），如果项目部署在子路径下（比如

    1
    /big-screen/

    ），需要在

    1
    defineConfig

    中配置

    1
    base: '/big-screen/'

    ，同时确保打包后的资源路径正确