vue/cli2.0优化 npm run build --report

简介: vue/cli2.0优化 npm run build --report

vue/cli2.0 脚手架


在项目写完了之后, 运行


npm run build --report


可以看出这个项目的资源占比情况。


可以看出整个项目哪一个资源在整个项目占比最大。


它会自动打开一个可视化的页面,看看你的哪一个资源占比最大


其中monent.js这个库占比还是比较大的。


使用(date-fns)一个较小的项目库来代替它。


https://blog.csdn.net/qq_36742720/article/details/83719615


date-fns较moment相比,更为轻量化,在实际开发中推荐使用date-fns。


better-scroll实现回弹滑动


我最开始就是,打包了我的 app.js 是 8M,网站基本瘫痪。


你打包的好的 js 在1-2M左右,这还算是比较正常的,但是这个大小也让我们接受不了。


下面我们来一点点的开始优化


移动端的库有 【Mint UI】 使用文档

相关文章
|
1月前
|
缓存 监控 JavaScript
优化策略:提升Vue应用的性能和加载速度
【4月更文挑战第23天】本文探讨了优化Vue应用的策略,包括代码层面(精简代码、组件拆分、计算属性和侦听器)、路由懒加载、数据懒加载与防抖节流、图片和资源压缩及CDN、缓存机制的利用,以及使用Vue Devtools和性能分析工具进行监控与调试。通过这些方法,可以提升Vue应用的性能和加载速度,确保用户获得流畅体验。
|
1月前
|
缓存 JavaScript 前端开发
vue如何优化首页加载速度
vue如何优化首页加载速度
33 7
|
1月前
|
缓存 JavaScript 前端开发
vue如何优化首页加载速度?
vue如何优化首页加载速度?
40 0
|
1月前
|
JavaScript
npm install没问题,但npm run dev的时候报Node Sass version 6.0.1 is incompatible with ^4.0.0 ^5.0.0
npm install没问题,但npm run dev的时候报Node Sass version 6.0.1 is incompatible with ^4.0.0 ^5.0.0
20 0
|
1月前
项目打包报错“caniuse-lite is outdated. Please run next command `npm update`”的解决方案
项目打包报错“caniuse-lite is outdated. Please run next command `npm update`”的解决方案
69 1
|
30天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
39 0
|
1月前
|
Web App开发 缓存 JavaScript
优化Vue首页加载速度的实用方法
优化Vue首页加载速度的实用方法
25 1
|
2天前
|
JavaScript
vue npm启动报错-解决
vue npm启动报错-解决
9 4
|
1月前
|
弹性计算 Dubbo Serverless
Serverless 应用引擎操作报错合集之阿里函数计算中配置完fc,出现‘Function instance exited unexpectedly(code 1, message:operation not permitted) with start command 'npm run start '. 报错如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
1月前
|
JavaScript 应用服务中间件 网络安全
vue项目上线和优化
vue项目上线和优化

相关实验场景

更多