前端性能优化 —— 项目瘦身
在我们的日常开发中,我们经常需要引入各种各样的第三方模块来帮助我们提升开发速度。但是有时候这些模块里面又包含了许多我们用不到的模块,在打包的时候又一并打包进去了,这就造成了没必要的带宽浪费。这里以Vue项目为例。
一、准备工作
1. 使用 Vue Cli 3
这时我们就要掏出我们的Vue项目利器 —— Vue cli 3
在 CLI 服务中的 vue-cli-service build的文档中可以看到:
--report 和 --report-json 会根据构建统计生成报告,它会帮助你分析包中包含的模块们的大小。
在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。
因此我们在build
项目的时候就可以这么做:
vue-cli-service build --report
复制代码
./node_modules/.bin/vue-cli-service build --report
复制代码
这两种方式都可以帮我们生成报告,运行其中一个命令(第一个命令不行的小伙伴可以直接运行第二个命令)后我们可以看到dist
目录下多出了一个report.html
文件:
这样,我们只要直接在浏览器中打开report.html就能看到模块分析了,如下图:
2. Angular 项目
Angular
项目的ng-cli
同样有类似的功能,我们只需要在编译时加上--stats-json
选项即可。然后再通过webpack.github.io/analyse/对生成的json
文件进行分析,或者使用webpack-bundle-analyzer
插件。
3. 其它方式
如果是其它用户,则需要安装webpack-bundle-analyzer
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
复制代码
webpack 配置:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {plugins: [new BundleAnalyzerPlugin()]
}
复制代码
编译完成后同样可以生成分析报告。
二、echarts 按需加载
1. 新建按需引入配置文件
在项目中,我们可能不会用到所有的 echart 模块,只会用到个别图表或组件,这样我们就可以只引入用到的,能有效减少资源的加载时间。
我们先新建一个专门的 echart 配置文件来引入相关代码:
// 路径:@/lib/echarts.js// 引入主模块
const echarts = require('echarts/lib/echarts');// 引入柱状图
require('echarts/lib/chart/bar');// 引入相关组件
require("echarts/lib/component/dataZoom");export default echarts
复制代码
当然也可以使用import
:
// 路径:@/lib/echarts.js// 引入主模块
import echarts from 'echarts/lib/echarts'// 引入柱状图
import 'echarts/lib/chart/bar'// 引入相关组件
import 'echarts/lib/component/dataZoom'export default echarts
复制代码
具体有哪些选项,可以直接查看node_modules
目录下的echarts/index.js
2. 在用到的组件中引入 echarts
import echarts from '@/lib/echarts'
复制代码
如果这个图表仅仅针对这个组件,或者说用户使用到频率很低,我们可以使用懒加载的方式进一步优化,等到用户使用到这个组件的时候才去加载echart
图表:
methods: {init() {import("../../lib/echarts").then(Echarts => {// ...}}
}
复制代码
这时我们再通过vue-cli
工具来重新build
项目,打开report.html
分析对比优化前后的echart
大小:
结果一目了然。
三、crypto-js 按需加载
除了echart
可以使用这种方式,别的第三方库也能使用这些方法来加载。
我们经常会这样使用:
import crypto from 'crypto-js'// ...
crypto.HmacSHA1()
// ...
复制代码
上面这种方式会引入整个crypto-js
显然除了HmacSHA1
方法之外,我们不会使用到别的方法,那样就非常得不偿失了,因此我们可以像下面这样做:
import HmacSHA1 from 'crypto-js/hmac-sha1'// 如果要引入 Base64
import Base64 from 'crypto-js/enc-base64'
复制代码
具体有哪些可以单独引入的,可以直接查看node_modules
目录下的crypto-js
目录
现在,我们再build
来看看优化后的对比:
简直天差地别。
四、UI库 按需加载
如果我们为了快速开发一些公司内部的后台项目,或者是自己想做点东西来玩玩,但是不想写一些重复的样式,我们就会采用一些UI库。一些知名的UI库都是十分完善的,几乎包含所有日常所需的组件,因此它们的体积也是十分庞大的。如果我们只用到部分组件,但引入了所有组件,这样就不值得了。
以Element-ui
为例,UI框架通过借助babel-plugin-component来按需引入组件。这里我就不再如何进行按需引入了,官方文档已经写得十分详细了,Element-ui官方文档。
五、懒加载
上面echarts
优化中就已经使用过懒加载了,相信各位熟悉Vue
的小伙伴都知道这种加载方式,我们可以在使用到该组件的时候再把组件下载下来。依我的经验来说,一般不常用的、单独的模块可以使用这种方式,通过import
引入。注意,这实际上是由webpack
提供的方法,而非Vue
自身提供的方法。
Vue Router
路由懒加载:
import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)const AsyncComponent = () => import('components/async-component/async-component')export default new Router({routes: [{path: '/',component: 'AsyncComponent'},]
})
复制代码
异步组件:
components: {AsyncComponent: () => import('./async-component')
}
复制代码
六、Moment.js 和 IgnorePlugin
常用的日期处理类库Moment.js
居然有540.76kb
,真是让人难以置信。见下图:
它如此巨大的原因是因为有很多语言资源文件,用于转化能成多国时间格式,见GitHub issue。大多数情况下,我们并不需要用到这么多的格式,但是我们不能像上面的echart
和crypto
那样按需加载,因此我们需要借助IgnorePlugin。
在Vue根目录下新建vue.config.js
文件,然后在里面添加配置:
const webpack = require('webpack')module.exports = {configureWebpack: {plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]}
}
复制代码
这时我们就可以按需引入语言包:
const moment = require('moment');
require('moment/locale/zh-cn');moment.locale('zh-cn');
复制代码
这时我们再来看看它的大小:
七、总结
通过上面的例子,我想大家也能感受到许多第三方库因为要照顾到绝大部分情况,因此会比较大,但是我们可以通过一些方式只获取我们需要的部分。上面的对比图也显而易见了,减肥的效果是非常明显的,通过上面的方式,能够较大的提升用户体验,减少项目加载时间。
转载于:https://juejin.im/post/5cd3df9f51882518f75ca878
前端性能优化 —— 项目瘦身相关推荐
- Android性能优化—apk瘦身
1.代码:代码压缩混淆 2.资源方面:小图片使用SVG矢量图.移除无用资源.资源压缩.资源混淆 3.动态库:一般只需要配置armeabi和armeabi-v7a即可,相比配置各种ABI减少了大量体积( ...
- 如何给网站瘦身?图文并茂的前端性能优化指南
提高网站的速度对网站的成功有巨大的影响,因为网站的加载速度直接影响到用户体验和搜索引擎排名.Browser Diet 是一个非常好的指南,列出了前端性能优化的各种技巧和工具. 您可能感兴趣的相关文章 ...
- 【Day11】平时在项目开发中都做过哪些前端性能优化
平时在项目开发中都做过哪些前端性能优化 一.体验优化 二.提升页面性能 三.首页加载优化(减少白屏时间) 一.体验优化 从用户角度而言,优化能够让页面加载得更快.对用户的操作响应得更及时,能够给用户提 ...
- 移动H5前端性能优化指南[转]
移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
- WEB前端性能优化小结
1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
- 手机淘宝 521 性能优化项目揭秘
http://www.infoq.com/cn/articles/mobile-taobao-521-performance-optimization-project 又是一年双十一,亿万用户都会在这 ...
- 天猫11.11:手机淘宝 521 性能优化项目揭秘
又是一年双十一,亿万用户都会在这一天打开手机淘宝,高兴地在会场页面不断浏览,面对琳琅满目的商品图片,抢着添加购物车,下单付款.为了让用户 更顺畅更方便地实现这一切,做到"如丝般顺滑" ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来
基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 转载于:https://github.com/Meowv/Blog.git 本篇文章将给项目进行瘦身,删掉对 ...
- 腾讯云前端性能优化大赛火热招募中!
腾讯云首届前端性能优化大赛即将启动,2021年11月29日至2021年12月12日,赛事正式向广大前端开发者与技术达人启动线上招募,一场首屏耗时之间的"巅峰对决"即将上演!赶紧参与 ...
最新文章
- Nature综述:多年冻土的微生物组
- C#中[WebMethod]的用法,aspx、ashx、asmx
- 【NLP】有三AI NLP知识星球来了,仅此一家别无分店
- java python 运行 内存_Python C Java中字符串在内存中的存储
- 挖掘IP价值 天猫星选让明星直播1+1>2
- 四、Python-元组
- html5 Ajax 访问.net WebApi获取视频流
- 使用netmeeting进行网络培训
- 老电脑 升级 cpu性能排行 高性价比的cpu主板选择
- 如何读群晖硬盘_群晖直接读取Windows硬盘-eSATA挂载
- java开源商城 java搭建直播商城 微服务商城 百万千万级商城 分布式商城 VR全景商城 saas商城 b2b2c商城 o2o商城 积分商城 秒杀商城 拼团商城 分销商城 短视频商城 商家入驻商城
- spark学习9:sparkStreaming
- @JsonProperty
- navigateTo:fail can not navigateTo a tabbar page
- xxljob默认登录_XXL-JOB快速入门
- 狐妖小红娘服务器维护,3月7游戏更新公告 狐妖小红娘版本上线
- TWaver三维可视化管理软件、3D和2D开发工具软件的试用(申请试用的回复邮件)
- ffmpeg录制视频时添加时间水印
- 网易域名邮箱支持POP3/SMTP服务
- 织梦图集php,织梦怎么为新图集页面增加图片下载功能
热门文章
- IE8经常停止工作和显示异常
- redis bitmap
- CloudStats :一款SaaS 服务器监控工具
- kali系统破解WPA密码实战
- JavaScript中的普通函数与构造函数比较
- Cracking the coding interview--Q2.2
- c语言编程游戏界面,震惊!!!一个关于c语言图形化界面编程的小游戏-Go语言中文社区...
- php模板引擎如何实现,php模板引擎技术简单实现
- nas挂载windows_在windows2012上挂载NAS文件系统
- php网站首页点击更多时获取数据,jQuery+PHP实现点击按钮加载更多,不刷新页面加载更多数据!附:可用源码+demo...