Apple M1 Max设备上Vite项目启动耗时超20秒求助

问题详情 #

通过npm create vite@latest创建vanilla/javascript的Vite项目后，在Apple M1 Max设备上启动耗时超20秒，但相同项目在StackBlitz仅需460ms。环境配置：node v20.4.0、npm 9.7.2，Vite版本^4.4.2。

调试确认，Vite启动时自动解析localhost耗时超10秒，手动指定--host 127.0.0.1启动仅需105ms，推测是本地网络配置异常导致域名解析阻塞。

复现步骤 #

• 执行npm create vite@latest
• 选择vanilla/javascript模板
• 运行npm install
• 执行npm run dev

生成的package.json内容：

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^4.4.2"
  }
}

用于验证解析耗时的调试代码：

import { promises } from 'node:dns';
import http from 'node:http'

let now = performance.now();

const nodeResult = await new Promise((resolve, reject) => {
    promises.lookup('localhost').then((result) => {
        resolve(result.address)
    })
})
let timeTaken = performance.now() - now;
console.log(`ip lookup done after ${timeTaken} ms`);

now = performance.now();
http.createServer().listen(3000, "localhost", () => {
    timeTaken = performance.now() - now;
    console.log(`server started after ${timeTaken} ms`);
})

解决方法 #

1. 临时绕过：修改Vite启动命令 #

直接在package.json的dev脚本中指定host为127.0.0.1，跳过localhost解析：

"scripts": {
  "dev": "vite --host 127.0.0.1",
  "build": "vite build",
  "preview": "vite preview"
}

修改后运行npm run dev即可快速启动项目。

2. 修复本地DNS解析配置 #

localhost解析缓慢通常与系统hosts文件或DNS设置异常有关：

• 检查hosts文件：打开/etc/hosts（终端执行open /etc/hosts），确认存在正确的localhost映射：

  127.0.0.1       localhost
  ::1             localhost
  

  若缺失或被注释，添加上述内容并保存（需管理员权限）。
• 重置DNS缓存：终端执行以下命令清除系统DNS缓存：

  sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder
  

• 调整DNS服务器：将系统DNS切换为公共DNS（如8.8.8.8或1.1.1.1），避免本地DNS服务异常导致的解析阻塞。

3. 强制Node.js使用IPv4优先解析 #

Node.js的dns.lookup会优先遵循系统解析规则，若系统IPv6解析存在问题，可强制Node.js优先使用IPv4：
临时生效：

NODE_OPTIONS="--dns-result-order=ipv4first" npm run dev

永久生效（添加到shell配置文件，如~/.zshrc或~/.bashrc）：

echo 'export NODE_OPTIONS="--dns-result-order=ipv4first"' >> ~/.zshrc
source ~/.zshrc

内容的提问来源于stack exchange，提问作者greedsin