短视频开源源码，优化加载速度提升用户体验

短视频开源源码，优化加载速度提升用户体验

关闭source map

生产环境关闭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插件优化

项目中有pdf预览的功能,安装了pdfjs-dist 和vue-pdf两个插件,后来跟后端协商,走文件流的方式了, 就没用到这两个, 就卸载了, 如果谁有相关方案,欢迎来提

移除 preload（预载） 与 prefetch （预取）

vue 脚手架默认开启了 preload 与 prefetch，当我们项目很大时，会造成首屏加载速度慢的元凶

preload 与 prefetch 都是一种资源预加载机制； preload 是预先加载资源，但并不执行，只有需要时才执行它； prefetch 是意图预获取一些资源，以备下一个导航/页面使用； preload 的优先级高于 prefetch。

// vue.config.js


chainWebpack: config => {
    // 移除 preload(预载) 插件
    config.plugins.delete('preload')
    // 移除 prefetch(预取) 插件
    config.plugins.delete('prefetch')
  }

主要关注首屏速度, 可自行去体验下关闭前后的效果

压缩图片

项目里面后期肯定会放不少图片进去, 这些图片如果不压缩以下,占的资源就会非常大,社区里面有不少插件可以进行压缩,但我个人还是很喜欢熊猫压缩

以上就是短视频开源源码，优化加载速度提升用户体验， 更多内容欢迎关注之后的文章