如果小伙伴有做过首屏加载时间优化，应该会遇到chunk-vendors.js这个文件，巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。 下面通过一个实际的项目来演示，先通过插件webpack-bundle-analyzer来可视化地查看chunk-vendors.js…

基于细节进行性能实战优化处理，包括 Quasar 重构，图片压缩和 base64 转化，SplitChunksPlugin 代码分割，组件性能优化，代码重构方案、lighthouse分析优化等等

Lighthouse超详细实战分析，包括Performance性能、Accessibility无障碍、Best Practices最佳实践、SEO搜索引擎优化、PWA渐进式 web 应用

图片的优化处理汇总，包括选择合适的图片格式，图片压缩，CSS Sprites(雪碧图，CSS 精灵)，图片懒加载，CSS 替换实现，base64 格式，iconfont 字体图标，使用 CDN等等

主要介绍代码分割(Code Splitting)，使用SplitChunksPlugin插件，将第三方库或者公共基础组件进行单独打包，合理利用缓存，进行按需或者并行加载，提高首屏加载速度

介绍了前端性能分析工具，也介绍了包分析工具，还进行了项目优化实战，对第三方库进行按需引入，开启gzip压缩配置，进行代码分割等等，尽量减少构建包的大小，提升页面渲染速度。

打包体积优化！！！优化一半！！首次加载速度优化！！优化一半！！要让我们的项目fast fast fast！！

本文谨以自己的Vue项目经验来教你怎么在面试中说优化，如果有错误，有不足的，请指教，不吝指教，一起进步，找到更好的工作。如果觉得的本文对您有帮助，点个赞支持一下。 我个人认为性能优化可以从三个方面来进行，一是代码层面的优化，二是项目打包的优化，三是项目部署的优化。 开场白切记要…

最近花了一些时间在项目的性能优化上，背后做了很多工作，但是最后依然没有达到自己想要的结果，有些失望，但是还是记录下自己的执着。 性能优化总结：减少请求次数、减小资源大小、提高响应和加载速度、优化资源加载时机、优化加载方式。 站在用户视角的主观的可感知的性能。 站在开发者视角的可…