{ "name": "my project", "version": "1.0.0", "private": true, "dependencies": { "axios": "0.19.0", "imagemin-mozjpeg": "8.0.0", "imagemin-pngquant": "8.0.0", "imagemin-svgo": "7.0.0", "nuxt": "2.8.1", }, "devDependencies": { "autoprefixer": "9.6.1", "babel-eslint": "10.0.2", "eslint": "6.1.0", "eslint-friendly-formatter": "4.0.1", "eslint-loader": "2.2.1", "eslint-plugin-vue": "5.2.3" } }
9. 在显示大量数据时使用 Vue Virtual Scroller
当你需要在某个页面中显示大量的行，或者需要循环大量的数据时，你可能已经注意到页面可能会很快变得非常慢。要解决这个问题，你可以使用vue-virtual-scoller。
npm install vue-virtual-scroller
它将只渲染列表中可见的项，并重用组件和 dom 元素，效率高，性能好。它真的很容易使用，如丝般顺滑！✨
<template> <RecycleScroller :items="list" :item-size="32" key-field="id" v-slot="{ item }" > <div> {{ item.name }} </div> </RecycleScroller> </template>
10. 跟踪第三方包的大小
当很多人在同一个项目中工作时，如果没人关注安装包的数量，那么很快就会越来越多。为了避免应用程序变慢(特别是在移动网络变慢的情况下)，我在 VS Code 中使用了。这样，我就可以从我的编辑器中看到导入的模块库有多大，并且可以在它变得太大时检查出问题。
例如，在最近的一个项目中，整个 lodash 库被导入(大约有24kB的gzipped)。结果只使用了 cloneDeep 方法。通过 import cost 插件定位到这个问题，我们是这样解决的：
npm remove lodash npm install lodash.clonedeep
cloneDeep 函数可以在需要的地方引入：
import cloneDeep from "lodash.clonedeep";
要进一步优化，你可以使用 Webpack Bundle Analyzer ，用交互式的可缩放地图可视化文件大小。
关于处理大型 Vue 代码库，你还有其他最佳实践可以分享的吗？欢迎在评论区留言。
喜欢的朋友可以加作者二维码
