项目启动后浏览器第一次加载才会慢。 这个慢是因为加载less的源码, 按需编译中加载时间其实是在less的编译上。 看看vite项目第二次加载 可以看到页面的首屏加载时间是1.04s,页面的渲染完时间是1.09s,下载总大小是8.6MB,发送了120个请求 页面的渲染时间和webpack项目的渲染时间差不多,esm 的形式被浏览器加载和请求...
在本章节,小编将通过一个实际的项目,分别使用 Webpack 和 Vite 启动 dev server , 给大家展示一下 Vite 的威力。 快速的冷启动 由于是公司的内部项目,不方便将源代码上传到 github ,所以小编只能通过 gif 动图的方式给大家展示 Webpack 和 Vite 启动 dev server 的过程。 Webpack 首先是通过 Webpack 启动 d...
注意: 首次加载的时候,依然会很慢,这个是正常现象,因为这个插件, 加快vite载入界面速度的原理, 也和上面说的一样,而第一次,这个插件也没法知道,哪些依赖需要预构建,他只是在vite动态引入资源的时候,将这些资源都记录下来,自动写入了package.json中,当再次启动项目的时候,插件会读取之前他写入在package.json中的数据...
冷启动是指项目启动开发服务器时, node_module/.vite下没有任何之前的预构建文件, 这一般是项目第一次启动, 或项目通过server.force启动, 也可能是你手动删除了node_module/.vite之后启动, 此时Vite需要扫描项目的依赖并使用esbuild对这些依赖进行预构建NPM Dependency Resolving and Pre-Bundling 而启动后第一次加载...
解决方式 设置哪些依赖需要预构建,避免运行中才构建依赖。 优化插件 https://www.npmjs.com/package/vite-plugin-optimize-persist 参考文章 https://blog.csdn.net/qq_51368103/article/details/132073786 https://juejin.cn/post/7259582611182338105 前端工程师、程序员...
我们项目也有启动慢的问题,同事也提到过几次。刚好我之前也做过类似的探索和优化, 于是就借这个机会,改造一下项目, 解决启动耗时的问题。 于昨天下午, 成功嵌入 Vite, 项目启动时间由约 190s => 20s, 热更新时间缩短为 2s。 中间踩了一些坑, 好在最后爬出来了, 相关技术要点都会在下文中呈现。
执行npm init @vitejs/app,会让你输入项目名 然后会让你选择vue、react等模板 vue里面有vue和vue-ts模板,选择vue-ts 进入项目,初始化,就可以启动了。项目什么东西都没有,启动非常快,首页访问也非常快,为了验证vite首次启动慢的问题,引入element-plus,然后做了按需加载,结果命令行启动: ...
vite 的首次载入确实会稍微慢一些,第二次启动有缓存了就会快一些。从Vite的仓库里面看到有一些人反馈载入慢,但是第一次启动也不会慢成这样,单位也都是秒还到不了分钟。 你把鼠标悬停在比较慢的请求上,或者点击请求然后选择 Timing 卡片,看看具体是哪里慢了。是排队,还是阻塞,还是说等待响应上面。如果是等待响应上...