前端优化之路:构建、打包速度提升

简介: 如果一个项目构建、热更新、打包速度过慢,中途需大把时间去等待,那么不免让人抓狂。

【前言】

《闻香识女人》中有句经典台词,“有些人一分钟过尽一生”,多少人在等待中浪费了生命的美好。同样,如果一个项目构建、热更新、打包速度过慢,中途需大把时间去等待,那么不免让人抓狂。

【效果展示】

优化前,构建速度
前端优化-1.png

整整126秒,两分多钟过去后,项目才启动成功。

优化后,构建速度
前端优化-2.png

21秒运行完毕,仅用以前16%的时间,节约80%以上,过程不再枯燥、冗长。

优化前,打包速度

前端优化-3.png
由于过程过久,不得不另外用计时器

优化后,打包速度

前端优化-4.png
20秒打包结束,仅用了15%的时间,速度显著提升

再看下当前的热更新速度
前端优化-5.png
0.3秒,修改文件或内容后,可以瞬间同步最新视图,同样节约了等待时间。

【优化工作】

前面直观展示了优化前后结果对比图,现在就该讲讲优化过程。
首先,我想到了压缩代码,webpack有提供plugin,先引入

前端优化-6.png

再去vue.config.js里配置

前端优化-7.png

除了压缩,还不够,还需要分包 + 缓存

前端优化-8.png

最后,再将全局引入的sass样式处理一下。
需安装style的loader,将全局性的样式注入到如css, sass, scss, less, stylus等模块中;
安装style-resources-loader、vue-cli-plugin-style-resources-loader后,就可以去webpack里配置了。

前端优化-9.png

前端优化-10.png

到这里,优化过程就结束了,以后再也不用盯着进度条祈祷了。

相关文章
|
5天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
|
7天前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
12天前
|
前端开发 JavaScript 测试技术
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
12天前
|
前端开发 测试技术 持续交付
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
10天前
|
前端开发 JavaScript 编译器
前端研发链路之构建
本文首发于微信公众号“前端徐徐”,作者徐徐探讨了前端研发链路中的构建过程。文章介绍了构建器、JavaScript编译器和CSS编译器的作用及常见工具,详细解析了它们如何协同工作,提高开发效率和项目可维护性。适合前端开发者阅读,帮助理解现代前端构建体系。
12 1
前端研发链路之构建
|
3天前
|
存储 监控 前端开发
掌握微前端架构:构建未来前端应用的基石
【10月更文挑战第12天】随着前端技术的发展,传统的单体应用架构已无法满足现代应用的需求。微前端架构通过将大型应用拆分为独立的小模块,提供了更高的灵活性、可维护性和快速迭代能力。本文介绍了微前端架构的概念、核心优势及实施步骤,并探讨了其在复杂应用中的应用及实战技巧。
|
6天前
|
前端开发 JavaScript
Vite 多种前端框架的构建
Vite 多种前端框架的构建
|
11天前
|
存储 监控 前端开发
掌握微前端架构:构建可扩展的前端应用
【10月更文挑战第6天】随着前端应用复杂性的增加,传统单体架构已难以满足需求。微前端架构通过将应用拆分为独立模块,提升了灵活性与可维护性。本文介绍微前端的概念、优势及实施步骤,包括定义边界、创建共享UI库、设置通信机制等,并探讨其在SPA扩展、大型项目模块化及遗留系统现代化中的应用。通过实战技巧如版本控制、配置管理和监控日志,帮助团队高效协作,保持应用灵活性。微前端架构为构建大型前端应用提供有效解决方案,适合希望提升项目可扩展性的开发者参考。
|
16天前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
16天前
|
移动开发 前端开发 JavaScript
前端开发:从零到一构建响应式网页
【10月更文挑战第1天】前端开发:从零到一构建响应式网页
28 2