现代前端应用逻辑日趋复杂，在平衡性能和数据实效性方面，前端也逐渐开始承担一些责任。 最近我们在项目中就碰到了这样一个场景。我们的项目只是一个非常传统的数据看板类项目，用户打开页面，通过调用API读取数

umi项目中通过配置optimization.runtimeChunk避免不必要的更新，提高浏览器缓存的利用效率。

项目打包后的体积很大😢，打包时间也很长😢，热更新时间长😢？别担心😄，接下来教你如何升级老项目，进行打包编译优化！！从多个角度，飞速提升你的效率。

故事背景是入职不久后被领导喊去优化基建相关的事，从上一篇面试篇知道，入职不久后主管丢给我一个表格，上面列了四五条，都是当前项目存在的一些问题，让我看看有哪些可以去解决掉，一眼就瞅到了一个语言包优化。

Umi 4 现在可以在 npm 上使用了！基于 Umi 4 的蚂蚁内网框架也已在 2 个月前发布，目前上线近 100 应用，Umi 4 的主体功能已非常稳定，这也是第一次我们先在内网发布后在社区正式发

提升首屏加载时间原理：把大体积的包，分成多个小体积的包进行加载，减少请求时间 chainWebpack配置 chunks配置 compression-webpack-plugin服务端使用gzip进行

其他的非公共代码。 all: 不管文件是动态还是非动态载入，统一将文件分离。当页面首次载入会引入所有的包 async： 将异步加载的文件分离，首次一般不引入，到需要异步引入的组件才会引入。 initial：将异步和非异步的文件分离，如果一个文件被异步引入也被非异步引入，那它会被…

在SPA应用中，随着项目的推进，功能不断增加，代码量也随之日益增长，导致打包内容也变得更加臃肿，首屏加载慢，部分功能复杂的页面渲染慢，这个时候需要对打包内容进行优化调整。

宏任务和微任务都是异步任务。优先级：`同步任务` > `微任务` > `requestAnimationFrame` > `DOM渲染` > `宏任务`