Vite

// 浏览器环境下
const worker = new Worker('./worker.js')
// vite 中使用web Worker
import MyWyWorker form './worker?worker'
const worker = new MyWorker()

一、Webpack和Vite的主要区别是什么

在Webpack中，每次修改代码后都需要对整个项目进行重新编译 ，Vite中，它使用的ES模块加载器，修改代码后，Vite会即时在浏览器中编译和打包代码，然后将更改的部分直接传递给浏览器，只会加载这部分避免了重复的编译和打包步骤

还有一个问题，vite正因为使用esm,所以代码要到浏览器进行解析，当第一次访问某个页面时，浏览器需要请求并下载大量独立的模块文件+强缓存，导致虽然启动快，但是首次加载的时候，到浏览器加载时间较长

webpack则是启动时会所有代码都被打包成少数几个文件，进行一次完整的打包和编译，浏览器只需下载和解析少量大文件，因此后续的页面访问速度会比较快。

一、import 对象

1. import.meta.env.DEV

   vite会自动根据对应的指令赋值，npm run dev : DEV = true; npm run build: DEV=false

   "dev": "vite --host",
   "build": "vite build",

   当你运行 npm run build:test 时，Vite 会加载 .env.test 中的变量

   当你运行 npm run build:test 时，如果对应的脚本配置了 --mode test，那么 import.meta.env.MODE 的值就会被锁定为 "test"。[1, 2]

   • 优先加载文件：Vite 会去寻找并加载 .env.test 文件中的变量（如果存在）。[5, 6]
   • 代码静态替换：在你的源码中，所有的 import.meta.env.MODE 都会在打包时被直接替换为字符串 "test"。[2, 7]

2. import.meta.env.MODE

   • 首先MODE决定了读取哪个.env文件
   1. 运行 npm run dev (vite)： MODE 会自动被赋值为 "development"。
   2. 运行 npm run build (vite build)： MODE 会自动被赋值为 "production"。

   • .env（所有环境通用的默认配置）
   • .env.local（所有环境通用，但会被 Git 忽略，用于本地私人配置）
   • .env.[mode]（特定模式的配置，如 .env.development 或 .env.production）
   • .env.[mode].local（特定模式的本地覆盖配置）