vue项目优化总结
这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战
- 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层面
- 使用最新的 webpack 版本。我们会经常进行性能优化。 保持最新的 Node.js 也能够保证性能。除此之外，保证你的包管理工具 (例如 npm 或者 yarn ) 为最新也能保证性能。较新的版本能够建立更高效的模块树以及提高解析速度。
- 将 loaders 应用于最少数的必要模块中。
- 减少编译的整体大小，以提高构建性能。尽量保持 chunks 小巧。 - 使用 更少/更小 的库。 - 在多页面应用程序中使用 CommonsChunksPlugin。 - 在多页面应用程序中以 async 模式使用 CommonsChunksPlugin 。 - 移除不使用的代码。 - 只编译你当前正在开发部分的代码。
- 使用 cache-loader 启用持久化缓存。使用 package.json 中的 "postinstall" 清除缓存目录。
- 基础包分离：使用 html-webpack-externals-plugin，将基础包通过 CDN 引入，不打入 bundle 中使用 SplitChunksPlugin 进行(公共脚本、基础包、页面公共文件)分离(Webpack4内置) ，替代了 CommonsChunkPlugin 插件
- 多进程/多实例构建：HappyPack(不维护了)、thread-loader
- 利用image-webpack-loader进行图片压缩
- 引入DLLPlugin和DLLReferencePlugin分离出不需要更新变动的包
- 使用@babel/plugin-transform-runtime解决语法转换时生成的重复冗余代码
- resolve.modules减小文件搜索范围
- 设置noParse，减少不必要的解析
