web前端高级VUE - vue项目的优化总结包括代码层面及webpack层面

vue项目优化总结

  • vue代码层面
  • data 尽可能扁平化处理(vue数据劫持方面的优化)
  • 不需要修改的数据使用object.freeze冻结处理
  • v-if与v-show分场景使用
    • v-if:通过控制元素的添加和删除来实现显示和隐藏
    • v-show:直接控制元素的display来实现元素的显示和隐藏
    • 如果需要频繁控制元素的显示和隐藏则建议使用v-show
    • 如果需要根据用户角色来控制某元素是否显示则建议使用v-if
  • v-for循环时,注意key的作用,设置唯一key值可避免元素复用
  • 对于没有使用vue语法的模块,用v-pre指令来提升编译效率(v-pre中的代码不会进行vue语法解析)
  • 长列表中不直接渲染数据,而是采用虚拟列表渲染,借助插件:vue-virtual-scroll-list
  • 组件懒加载+骨架屏 优化首屏加载速度
  • 对于图片,采用图片懒加载,借助插件:vue-lazyload
  • 对于切换时,不用销毁的组件可以采用keep-alive进行缓存
  • UI组件库按需加载,不要一次把所有的全部加载
  • 使用alias减小文件搜索范围,提升搜索效率
  • webpack层面
  • 利用externals提取第三方依赖并用CDN引入
  • 利用SplitChunks插件提取公共js代码和分割js代码
  • 利用image-webpack-loader进行图片压缩
  • 引入DLLPlugin和DLLReferencePlugin分离出不需要更新变动的包
  • thread-loader多进程打包
  • 使用@babel/plugin-transform-runtime解决语法转换时生成的重复冗余代码
  • resolve.modules减小文件搜索范围
  • 设置noParse,减少不必要的解析

你可能感兴趣的:(WEB前端框架,VUE,vue项目优化,vue代码优化,webpack优化)