构建Vue大型应用的10个最佳实践(小结)(3)

<template> <RecycleScroller :items="list" :item-size="32" key-field="id" v-slot="{ item }" > <div> {{ item.name }} </div> </RecycleScroller> </template>

10.追踪第三方程序包的大小

多人合作一个项目时，如果没人关注安装的依赖包数量很快变的难以置信。为了避免程序变慢（尤其是在移动网络环境），我这VSC中使用这样就可以编辑器中看到导入的包有多大，并且找出大的原因。

例如在最近的项目中，导入了整个lodash库（压缩后24kB）。 有啥子问题？ 仅仅使用cloneDeep方法。 通过import cost package找到了问题，我们通过以下方式解决了该问题：

npm remove lodash npm install lodash.clonedeep

在使用的地方导入：

import cloneDeep from "lodash.clonedeep";

为了进一步优化，我们还可以使用Webpack Bundle Analyzer包通过树状图来可视化Webpack输出文件的大小。