掘金上有很多大佬分享过性能优化的经验贴，但有一些方式针对需要快速的迭代的h5不太适用，这里分享一些适用于h5开发(Vue)性能优化的方法
vue 自带了模块分析 可以打包命令后添加–report 就会生成一个report.html 直接运行即可看到各个模块占比
一.加载优化
1.路由懒加载：
使用路由懒加载，不做路由懒加载的话，用户打开首页，会一次性加载所有资源
{
path: '/loading',
name: 'loading',
component: () => import('@/views/loading/index.vue'),
},
原理：依托ES6动态加载模import(),调用 import() 之处，被作为分离的模块起点，意思是，被请求的模块和它引用的所有子模块，会分离到一个单独的 chunk 中,可以通过魔法注释设置模块名称，名称相同的将会被组合到相同的块中
2.组件懒加载：
通过import 异步引入对应组件资源，但这样可能导致请求增多
拆分原则：
1.该页面体积过大，导致加载缓慢，通过浏览器并行发起请求，提示下载速度
2.该组件不是一进入页面就展示，需要一定条件下才触发（比如弹框组件）
3.该组件复用性高，很多页面都有引入，利用组件懒加载抽离出该组件，一方面可以很好利用缓存，同时也可以减少页面的 JS 文件大小（比如表格组件、图形组件等）
// vue 中实现异步加载组件
import { reactive, ref, onMounted, computed, watch,defineAsyncComponent } from 'vue'
const rule = defineAsyncComponent(() => (import('_c/rule')))
3.Tree shaking 优化
export default 导出的是一个对象，无法知道里面是否使用未导出的对象，但通过export 导出的函数就能利用tree-shaking 去除代码中没有使用的部分
4.骨架屏
插件：vue-skeleton-webpack-plugin 可以给不同页面设置骨架屏
白屏时间调试：谷歌的Performance 中FP/FCP(首屏渲染)
5.长列表虚拟滚动
如果使用长图去进行列表滚动，所需要的渲染时间会很长，滚动时还会造成页面卡顿，整体体验非常不好
虚拟滚动——指的是只渲染可视区域的列表项，非可见区域的不渲染，在滚动时动态更新可视区域，该方案在优化大量数据渲染时效果是很明显的，目前已有成熟的虚拟滚动插件
6.使用requestAnimationFrame 制作动画
（1）引擎层面
setTimeout/setInterval 属于 JS引擎，requestAnimationFrame 属于 GUI引擎
JS引擎与GUI引擎是互斥的，也就是说 GUI 引擎在渲染时会阻塞 JS 引擎的计算
（2）时间是否准确
requestAnimationFrame 刷新频率是固定且准确的，但 setTimeout/setInterval 是宏任务，根据事件轮询机制，其他任务会阻塞或延迟js任务的执行，会出现定时器不准的情况
7. 调整JS 的加载方式
js 常用的有6种加载方式，async、defer 是 script 标签的专属属性，对于网页中的其他资源，可以通过 link 的 preload、prefetch 属性来预加载
1.正常加载：会阻塞 dom 渲染，浏览器必须等待 index.js 加载和执行完成后才能去做其它事情
<script src="index.js"></script>
2.异步加载：JS 不会阻塞 DOM 的渲染，async 加载是无顺序的，当它加载结束，JS 会立即执行
使用场景：使用场景：若该 JS 资源与 DOM 元素没有依赖关系，也不会产生其他资源所需要的数据时，可以使用async 模式，比如埋点统计
<script async src="index.js"></script>
3.defer 模式：defer 资源会在 DOMContentLoaded 执行之前，并且 defer 是有顺序的加载，如果有多个设置了 defer 的 script 标签存在，则会按照引入的前后顺序执行，即便是后面的 script 资源先返回
<script defer src="index.js"></script>
4.module 模式：在主流的现代浏览器中，script 标签的属性可以加上 type="module"，浏览器会对其内部的 import 引用发起 HTTP 请求，获取模块内容。这时 script 的行为会像是 defer 一样，在后台下载，并且等待 DOM 解析
Vite 就是利用浏览器支持原生的 es module 模块，开发时跳过打包的过程，提升编译效率
<script type="module">import { a } from './a.js'</script>
5.preload：预加载，用于提前加载一些需要的依赖，这些资源会优先加载（如下图红框），vue2中 会自动给首页的所需资源添加预加载
5.1preload 加载的资源是在浏览器渲染机制之前进行处理的，并且不会阻塞 onload 事件；
5.2preload 加载的 JS 脚本其加载和执行的过程是分离的，即 preload 会预加载相应的脚本代码，待到需要时自行调用；
<link rel="preload" as="script" href="index.js">
6.prefetch：利用浏览器的空闲时间，加载页面将来可能用到的资源的一种机制
prefetch 特点：
6.1 prefetch 加载的资源可以获取非当前页面所需要的资源，并且将其放入缓存至少5分钟（无论资源是否可以缓存）
6.2当页面跳转时，未完成的 prefetch 请求不会被中断
8.图片优化
1.图片动态裁剪：
利用阿里云/腾讯云cdn提供的图片动态裁剪功能，只需在图片的url地址上动态添加参数，就可以得到你所需要的尺寸大小，针对不同分辨率使用合适的图片可以有效减少图片尺寸。
// 具体形式 h高度 w宽度 e(0：按长边缩放,1:按短边缩放) c(0:)
<https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg@100h_100w_1e_1c>
2.图片懒加载：
对于一些图片量比较大的首页，用户打开页面后，只需要呈现出在屏幕可视区域内的图片，当用户滑动页面时，再去加载出现在屏幕内的图片，以优化图片的加载效果
图片懒加载实现原理：
由于浏览器会自动对页面中的 img 标签的 src 属性发送请求并下载图片，可以通过 html5 自定义属性 data-xxx 先暂存 src 的值，然后在图片出现在屏幕可视区域的时候，再将 data-xxx 的值重新赋值到 img 的 src 属性即可
二、图片渲染优化
1.CSS写在头部，JS写在尾部并异步
2.避免img、iframe等的src为空：空src会重新加载当前页面，影响速度和效率
3.尽量避免重置图像大小：多次重置图像大小会引发图像的多次重绘，影响性能
4.大图像尽量避免使用DataURL：DataURL图像没有使用图像的压缩算法，文件会变大，并且要解码后再渲染，加载慢耗时长
三、dom渲染优化
1.减少dom节点
2.优化动画
1.尽量使用CSS3动画
2.合理使用requestAnimationFrame动画代替setTimeout
3.GPU加速
使用某些HTML5标签和CSS3属性会触发GPU渲染
1.css 属性opacity、transform、transition
2.HTML标签 video、canvas、webgl
四.样式优化
1.避免在HTML中书写style
2.避免CSS表达式，CSS表达式的执行需跳出CSS树的渲染
3.正确使用display
display:inline后不应该再使用float、margin、padding、width和height
display:inline-block后不应该再使用float
display:block后不应该再使用vertical-align
display:table-*后不应该再使用float和margin
4.不声明过多的font-size
5.值为0时不需要任何单位
五.脚本优化
1.减少重绘和回流
避免不必要的DOM操作
避免使用document.write
减少drawImage
尽量改变class而不是style，使用classList代替className
用DOMFragment缓存批量化DOM操作
2.尽量避免操作Dom，可以先用
3.缓存.length的值：每次.length计算用一个变量保存值
六.构建优化
基于各类打包工具进行体积优化，
减少打包时间：缩减范围、缓存副本、定向搜索、提前构建、并行构建、可视结构
减少打包体积：分割代码、摇树优化、动态垫片、按需加载、作用提升、压缩资源
1.减少打包时间
1.配置include/exclude
减少检索的范围，一般是再各loader中进行配置
export default {
// ...
module: {
rules: [{
exclude: /node_modules/,
include: /src/,
test: /.js$/,
use: "babel-loader"
}]
}
};
2.缓存副本
配置cache缓存Loader对文件的编译副本，大部分Loader/Plugin都会提供一个可使用编译缓存的选项，通常包含cache字眼。以babel-loader
export default {
module: {
rules: [{
// ...
test: /.js$/,
use: [{
loader: "babel-loader",
options: { cacheDirectory: true }
}]
}]
},
};
3.定向搜索
配置resolve提高文件的搜索速度
export default {
// ...
resolve: {
alias: {
"#": '', // 根目录快捷方式
"@": '', // src目录快捷方式
swiper: "swiper/js/swiper.min.js"
},
// 模块导入快捷方式
extensions: [".js", ".ts", ".jsx", ".tsx", ".json", ".vue"] // import路径时文件可省略后缀名
}
};
4.并行构建
配置Thread将Loader单进程转换为多进程,若项目文件不算多就不要使用,开启多个线程也会存在性能开销。
5.可视结构，寻找体积过大的包
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
export default {
// ...
plugins: [
// ...
BundleAnalyzerPlugin()
]
};
2.减少打包体积
1.分割代码
webpack v4使用splitChunks替代CommonsChunksPlugin实现代码分割。
2.摇树
删除项目中未被引用代码，只对ESM模块有效，webpack中将模式设置为production就可以开启摇树
3.动态垫片
通过垫片服务根据UA返回当前浏览器代码垫片，好处是无需将繁重的代码垫片打包进去
4.按需加载
webpack中配合import()实现按需加载
// 魔术注解
const Login = () => import( /* webpackChunkName: "login" */ "../../views/login");
const Logon = () => import( /* webpackChunkName: "logon" */ "../../views/logon");
3.抽离第三方包
configureWebpack: config => {
// 再这里配置不需要进行打包的组件
config.externals = {
vant: 'vant',
axios: 'axios',
}
},
4.开启gzip压缩
一般正式项目上了cdn后 自动开启gzip压缩模式，所以一般无需配置，如果有需要的话，可以开启(需要nginx 也配置相关的) 默认nginx是可以直接转换压缩的，只不过直接有gz文件可以省去压缩的时间
// 开启gzip压缩
const CompressionPlugin = require('compression-webpack-plugin')
// vue.config.js
config.plugins.push(
new CompressionPlugin({
filename: '[path].gz[query]',
test: /.js$|.css$|.html$|.ttf$|.eot$|.woff$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 不删除源文件
})
)
5.分包 splitChunks
项目中的第三方库默认会被打包到一个文件名含vendors的bundle中，splitChunks可以抽离出常用的第三方包，不整合到主包中
// 分离第三方包
config.optimization = {
splitChunks: {
chunks: 'all',
// 入口和它的同步依赖最多能被拆分的数量，默认为3
maxInitialRequests:5,
cacheGroups: {
axios: {
name: 'axios',
test: /[\/]node_modules[\/]axios[\/]/,
priority: -10,
},
vant: {
name: 'vant',
test: /[\/]node_modules[\/]vant[\/]/,
priority: -10,
},
'vue-router': {
name: 'vue-router',
test: /[\/]node_modules[\/]vue-router[\/]/,
priority: -10,
},
pinia: {
name: 'pinia',
test: /[\/]node_modules[\/]pinia[\/]/,
priority: -10,
},
},
},
}
原文链接：https://juejin.cn/post/7355096015584264192 作者：zxp123
