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，减少不必要的解析