首屏加载
首屏加载:用户输入网址到首屏内容渲染完成时间。此时页面不一定要全部渲染完毕,但是用户第一眼看到的内容需要展示完全。
计算首屏加载时间公式
times = (performance.timing.domComplete - performance.timing.navigationStart) / 1000
解决方法
减少入口文件体积
通过路由懒加载,只有在解析路由的时候才加载组件
const routes = [
{
path: "Home",
name: "Home",
component: () => import('./components/home.vue')
}
]
静态资源本地缓存
后端返回资源:采用HTTP缓存(强制缓存 + 协商缓存)
前端合理利用local storage
CDN静态资源缓存 vue vuex axios
UI框架按需加载
使用element、antd、uview之类的ui框架时用到什么组件就加载什么组件
避免组件重复打包
多个路由使用相同库时抽离成公共库
方案:在webpack的config文件中,修改CommonsChunkPlugin的配置民Chunks:2
minChunks就会把使用2次及以上的包抽离出来,放到公共依赖文件中,避免重复加载
todo:vue编译分片打包
图片资源压缩
对于页面上的icon,可以使用在线字体图标,或者雪碧图 ,将众多的小图标合并到一张图片上,减轻http请求压力
开启GZip压缩
拆完包后,用gzip做一下压缩,
安装 compression-webpack-plugin
在webpack中配置压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js','css']
// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})