React+Vite技术栈下首屏资源优化

文章预览

大厂技术    高级前端    Node进阶 点击上方  程序员成长指北 ，关注公众号 回复 1 ，加入高级Node交流群 文章转载于稀土掘金技术社区——码云之上 前言 最近小组做的H5应用需要通过iframe嵌入到第三方站点里（第三方站点也是H5应用，目的是利用第三方应用的流量）。对方老板希望我们站点打开速度能快一点，不要影响到他们的用户体验。为此，专门做了一轮首屏优化。 谈到H5应用的首屏优化，首屏资源体积优化是重中之重。我们的H5应用采用的技术栈是 Vite [1] + React [2] + React-Router [3] + Arco-Design [4] ，接下来我将详细介绍如何实现首屏资源体积减少这一目标。 问题现状 当初为了快速开发，采用的是Vite下的 react-ts [5] 模板 pnpm create vite h5-app --template react-ts 该模板下默认是没有任何优化措施的： import  { defineConfig }  from   'vite' import  react  ………………………………