Recently I started a new project in React v18 which uses Vite v4.1.1 as a build tool.
After installing a few libraries the initial load of the app (after running npm run dev) takes several minutes even though the Vite itself starts within a few seconds. After it, the HMR works fine and every change is reflected very fast.
I noticed that some dependencies take 1-2 minutes to fetch (in the network tab).
https://i.stack.imgur.com/XsTM9.png”rel=“noreferer”> 表格
在这一情景下,一些排位从海滩上排出,但如果没有,反应路线、人工或反应频率可每负荷一个分钟。 在此,主要问题似乎是React app的主要档案,我更不理解。
Can someone explain why it takes so long and how to improve startup time? I saw that it can be related with pre bundling but on the recent project, I didn t have such poor perf.
我的发言:
"@emotion/react": "^11.10.5",
"@mantine/carousel": "^5.10.3",
"@mantine/core": "^5.10.3",
"@mantine/hooks": "^5.10.3",
"@tanstack/react-query": "^4.24.4",
"axios": "^0.27.2",
"embla-carousel-react": "^7.0.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.1",
"tabler-icons-react": "^1.56.0"
And dev deps:
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@types/styled-components": "^5.1.26",
"@typescript-eslint/eslint-plugin": "^5.34.0",
"@typescript-eslint/parser": "^5.34.0",
"@vitejs/plugin-react": "^3.0.1",
"@vitejs/plugin-react-swc": "^3.1.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.22.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard-with-typescript": "^22.0.0",
"eslint-import-resolver-typescript": "^3.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.21",
"prettier": "^2.7.1",
"sass": "^1.58.0",
"tailwindcss": "^3.2.6",
"typescript": "^4.7.4",
"vite": "^4.1.1",
"vite-plugin-eslint": "^1.8.1"
Vite config文档
import { defineConfig } from vite ;
import react from @vitejs/plugin-react ;
import eslintPlugin from vite-plugin-eslint ;
export default defineConfig({
plugins: [react(), eslintPlugin()],
server: {
port: 3000,
open: true
}
});
我只想提一下在docs中关于依赖前消亡的简短说明,但这并没有涉及我的问题。 在Gite Hub也看到了一个问题,即Tailwind能够造成这一问题,但甚至在我安装了Tailwind之前,问题依然存在。 现在没有任何想法能够造成这种状态。