跳到主要内容

常用技巧

  • 统一环境配置: loadEnv
  • 动态导入文件模块：import.meta.glob
  • 预构建配置： optimizeDeps
  • 代码分割拆包：rollupOptions.output.manualChunks

loadEnv​

加载 envDir 中的 .env 文件。默认情况下只有前缀为 VITE_ 会被加载，除非更改了 prefixes 配置

import.meta巧用​

import.meta.url​

  • 动态获取当前的文件路径

import.meta.env​

  • 获取.env文件的环境变量

import.meta.glob​

  • 支持文件系统导入多个模块
  • 解决动态路径import导入问题：由于vite是静态分析，对于动态路径拼接时，使用import动态导入会有问题，vite无法确认最终导入的路径，因此可以通过import.meta.glob来解决动态路径问题
    • 通过import.meta.glob可以预加载指定匹配的路径

注意：这是 Vite 独有的功能，不是 Web 或 ES 标准。

  • 在webpack中，使用require.context

使用方式

  • 1、以 ! 作为前缀。表示要忽略结果中的一些文件
  • 2、可以是一个 glob 数组
  • 3、具名导入，可以只导入带有 import 选项的部分模块，当与 eager 结合使用时，甚至可以为这些模块启用 tree-shaking。
  • 4、动态导入，支持变量动态导入
js
// 忽略文件匹配模式
const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])
// 多个匹配模式
const modules = import.meta.glob(['./dir/*.js', './another/*.js'])
// 具名导入 
const modules = import.meta.glob('./dir/*.js', { import: 'setup' })
// tree-shaking
const modules = import.meta.glob('./dir/*.js', {
  import: 'setup',
  eager: true,
})
// 动态导入
const module = await import(`./dir/${file}.js`)

optimizeDeps​

  • 配置预购建