短视频开源源码,优化加载速度提升用户体验
短视频开源源码,优化加载速度提升用户体验
生产环境关闭productionSourceMap、css sourceMap, 生产环境没必要打开这个
// vue.config.js
const isProduction = process.env.NODE_ENV === 'production'
// 判断是否是生产环境
module.exports = {
productionSourceMap: !isProduction, //关闭生产环境下的SourceMap映射文件
css: {
sourceMap: !isProduction, // css sourceMap 配置
loaderOptions: {
...其它代码
}
},
...其它代码
}
项目中有pdf预览的功能,安装了pdfjs-dist 和vue-pdf两个插件,后来跟后端协商,走文件流的方式了, 就没用到这两个, 就卸载了, 如果谁有相关方案,欢迎来提
vue 脚手架默认开启了 preload 与 prefetch,当我们项目很大时,会造成首屏加载速度慢的元凶
preload 与 prefetch 都是一种资源预加载机制; preload 是预先加载资源,但并不执行,只有需要时才执行它; prefetch 是意图预获取一些资源,以备下一个导航/页面使用; preload 的优先级高于 prefetch。
// vue.config.js
chainWebpack: config => {
// 移除 preload(预载) 插件
config.plugins.delete('preload')
// 移除 prefetch(预取) 插件
config.plugins.delete('prefetch')
}
主要关注首屏速度, 可自行去体验下关闭前后的效果
项目里面后期肯定会放不少图片进去, 这些图片如果不压缩以下,占的资源就会非常大,社区里面有不少插件可以进行压缩,但我个人还是很喜欢熊猫压缩
以上就是短视频开源源码,优化加载速度提升用户体验, 更多内容欢迎关注之后的文章