英文:
Chrome hangs with Vite Dev Server
问题
我刚刚将一个大型React应用从Webpack迁移到Vite。我配置了使用带有HMR的开发服务器。这个项目很大，有很多依赖项和许多页面，我认为它们在第一次加载时就被加载了。我正在使用react-router进行路由，但我还没有时间懒加载组件。
这是我的vite.config.js配置文件：
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
export default defineConfig({
root: "src",
envDir: "../",
envPrefix: "REACT_", // 为了与我们当前的环境变量兼容
build: {
target: "esnext",
commonjsOptions: {
transformMixedEsModules: true,
},
},
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
server: {
port: 8080,
host: "0.0.0.0",
proxy: {
"/api": {
target: "http://localhost:5000",
changeOrigin: true,
rewrite: (path) => path.replace("/api", ""),
},
},
},
});
当我运行开发服务器时，我可以在Firefox中毫无问题地访问它，但是当我在Chrome中使用时，标签页卡住了，如果我打开开发工具，我会看到许多静态文件处于挂起状态，无法加载。
有大量文件正在加载，但是Firefox没有问题加载它们，所以我不知道是Chrome的问题还是我漏掉了什么。
通过我的研究和推断，我认为这与缓存有关，但我不确定问题出在哪里。
如果需要更多详细信息，请告诉我！
1: https://i.stack.imgur.com/CGpen.png
英文:
I just migrated a big react application from Webpack to Vite. I configured to make use of the dev server with HMR. The project is kind of big and it has a lot of dependencies and many pages that I thinkg are loaded in the first load. I am using react-router for the routing and I don't have the time to lazy load the components yet.
This is my vite.config.js:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
export default defineConfig({
root: "src",
envDir: "../",
envPrefix: "REACT_", // To mantain compatibility with our current env vars
build: {
target: "esnext",
commonjsOptions: {
transformMixedEsModules: true,
},
},
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
server: {
port: 8080,
host: "0.0.0.0",
proxy: {
"/api": {
target: "http://localhost:5000",
changeOrigin: true,
rewrite: (path) => path.replace("/api", ""),
},
},
},
});
When I run the dev server I can access it with no problems using Firefox but when I use Chrome the tabs hangs and if I get to open the devtools I see many static files are pending and won't load.
A huge bunch of file are being loaded but Firefox has no issue loading them so I don't know if it's a Chrome issue or I missed something.
Doing my research and deductions I think it has something to do with the cache but I am not sure what is the issue.
Let me know if you need more details!
答案1
得分: 2
EDIT:
我在Vite的故障排除页面的开发服务器部分找到了一个实际的解决方案。
按照这些步骤，然后重新启动您的系统。
我还将Vite更新到最新版本以防万一。
ORIGINAL:
好的，我找到了一个解决方案：
在我的Linux系统中，我通过在文件**/etc/security/limits.conf**的末尾添加以下行来增加每个进程允许的最大文件描述符来解决这个问题：
>* - nofile 65536
保存更改后，我重新启动了我的系统，Chrome对开发服务器的问题就没有太多问题了。
我在Windows上进行了测试，没有任何额外的配置，一切都正常工作。
额外解决方案
我发现的另一个解决方案是降级到Vite@3.2.5。如果上述方法不起作用，您可以尝试这个。
参考链接
https://github.com/vitejs/vite/issues/11468#issuecomment-1419820986
英文:
EDIT:
I found an actual solution in the Vite's Troubleshooting page in the Dev Server section.
Follow the steps and then reboot your system
I have also updated Vite to the latest version just in case.
ORIGINAL:
Ok, I found a solution:
In my Linux system I fixed it by incrementing the maximum file descriptors allowed per process in my OS in the file /etc/security/limits.conf adding this line at the end:
>* - nofile 65536
After saving the changes I rebooted my system and Chrome didn't have much problem with the dev server anymore.
I tested it on Windows and it worked just fine without any additional configuration.
Extra
Another solution I found was to downgrade to Vite@3.2.5. Something you can try if the above didn't work
References
https://github.com/vitejs/vite/issues/11468#issuecomment-1419820986
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论