随着时间推移,前端发展越来越快,所遇到的瓶颈也越来越多,针对性能这块,有一些个人心得,描述不准确的地方,还望多多指教。
目前主流框架react
、vue
、argular
等(还有很多),国内大多数在Vue/React
中,argular
也有,但似乎用的不多。Vue3.x
针对性能,渲染机制等也是一个不错的选择,不过抉择根据你的实际情况来定,我此次选择的是react
,原因有很多,就不一一赘述了。
本次采用:react@17.x
、react-dom@17.x
、mobx@6.x
、webpack@5.x
、axios
、echarts
、antd@4.x
、styled-components@5.x
if
else
for
switch
等本身(这也是 Javascript编码 Airbnb
推荐之一)HTML div
等语义化标签深层次嵌套(Dom树),不利于绘制、渲染Service Worker
(出于安全考虑,Service workers
只能由HTTPS承载,本地调试可使用localhost
)Web Workers
因为我用的是webpack 构建
,所以下面将用webpack进行处理。可以使用webpack
对外提供的一些Api,如:externals
、cache
、mini-css-extract-plugin
、copy-webpack-plugin
、optimization
等进行合理利用处理。
externals
防止将某些 import 的第三方资源打包到 bundle 中,如react
react-dom
等optimization
从 webpack 4 开始,会根据你选择的 mode 来执行不同的优化,不过所有的优化还是可以手动配置和重写mini-css-extract-plugin
可将Css单抽离到单独的文件中,可异步加载
没有重复的编译(性能)autoprefixer
解决各大浏览器厂商CSS前缀问题的神器stylelint-webpack-plugin
stylelint 样式代码中避免错误并强制规范iconfont-webpack-plugin
将svg所有图标构建成 iconfont 字体库(自定义Svg图标)
2. svgo
SVG Optimizer 是一个基于 Node.js 的工具,用于优化 SVG 矢量图形文件
3. 使用字体库
可以使用阿里提供字体库来处理,具体使用步骤见链接:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
tinify
在线压缩工具【辅助】
copy-webpack-plugin
将已存在的单个文件或整个目录复制到构建目录cache
缓存生成的 webpack 模块和 chunk,来改善构建速度compression-webpack-plugin
提供带 Content-Encoding 编码的压缩版的资源terser-webpack-plugin
压缩 JavaScriptworkbox-webpack-plugin
渐进式网络应用使用分析辅助功能进行辅助开发,可视化视图便捷查看模块中有哪些依赖,首页不需要加载的依赖,可以滞后加载或按需加载
webpack
输出文件的大小Web
应用程序和网页,收集现代性能指标Gzip
加速CDN
提升,Http2
网络传输Http
缓存协议GPU
硬件加速,加速渲染(可根据项目渲染实际情况)Spin loading
,来缓解资源下载(网络较差或不稳定或移动端问题)LightHouse
检测无痕浏览模式
参考资源:webpack、airbnb、autoprefixer、tinify
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。