vite常见问题

浏览器的兼容性？

• vite为支持原生ESM的浏览器打包，包括动态的import

• ie是完全不支持的，如果用户需要用ie，那么肯定是不能用vite来上生产环境

• 低版本的浏览器也是不支持的，可以使用官方提供的[@vitejs/plugin-legacy插件

  • plugin-legacy 会将代码打包两套

    • 如果浏览器支持ESM, 则使用原生ESM加载，引入index.[hash].js，代码里使用import导入文件

    • 如果浏览器不支持ESM 则使用另外一套System.import的方案，引入index-legacy.[hash].js

循环引用问题

切换路由缓慢问题

对于某个页面，如果第一次进去，是需要解析、加载模块，会感觉慢一些，第二次进去就正常了

• 设置预加载就好了，由于vite 是在切换页面才会加载当前页面组件并且编译，编译好了会进入缓存，切换路由就需要重新加载缓存

处理静态资源路径

意：vite对于小于4kb的图片，会转化为base64，减少http请求

• 可通过配置build.assetsInlineLimit

• 方式一 【常用主流方法】
  • 通过import.meta.url 能够保证资源的路径，生产构建之后，也会指向构建后的部署路径，保证生产环境也能指向正确的资源路径
  • import.meta.url 返回当前模块文件的完整 URL（开发环境是 file:// 协议，生产环境是构建后的路径）

js

function getImageUrl(name) { 
     return new URL(`./dir/${name}.png`, import.meta.url).href 
 }

• 方式二

js

<script setup>
import demoPng from '@/assets/images/demo.png';
</script>

动态导入问题

• 【Dynamic Import 动态导入】： Vite 支持使用变量进行动态导入，但是有局限 【只支持一层的文件名，多层目录嵌套是不行的】
  • 请注意，变量仅表示一层深的文件名。如果 file 为 'foo/bar'，则导入将失败

js

const module = await import(`./dir/${file}.js`)

• 对于多层文件目录，可通过glob动态导入