最近在使用 Figma 的过程中，合并分支和打开文件的速度都变的很慢，Figma 的左侧经常出现内存占用过大的提示，一看图层数量，已经有一百四十多万了。
如果你是深度使用 Figma 的同学，应该会经常遇到 Figma 加载速度慢或者内存不足的问题，加载速度慢还可以等一等，但是内存不足的话就很崩溃了，如果你的项目页面很多，你在画图时，每次进入一个页面，都会将图层加载到缓存中，加载的多了就会提示你内存不足了。
最初我以为是我电脑配置问题，我使用的 macbook air 只有 8g 内存，但当我后面换了台式机之后，这个问题依然存在，后来查阅 Figma 的文档才知道单个标签页缓存是有限制的，最大的数量为 2G，不论你用的是浏览器还是软件。这个问题的原因其实就来自于浏览器的内核限制，单个标签的内存数量最大为 2G，而 Figma 的软件使用的也是浏览器套壳技术，所以即便安装桌面软件页无法摆脱这个限制。
解决方式
那么既然没办法通过扩大内存的方式解决问题，我们只能尽量减少 Figma 中页面占用的内存。
-
减少单个页面的图层数量，前面提到每个页面的图层会在打开时加载到缓存中，那我们在使用 Figma 的过程并不是一定要每个页面都打开一次的，将图层分散到多个页面会减少单个页面打开时的缓存图层数量，也就降低了内存占用，这样只有你特殊情况下需要打开大量页面才会触发内存不足提示。
-
清理你隐藏的图层，这一点是最重要的，可能你会说我没有刻意去隐藏图层，但实际上有很一个操作会导致我们的页面中存在大量的隐藏图层，那就是组件属性。 在 Figma 的组件，我们可以为组件内的图层增加显示或者隐藏的属性，然后在使用组件时根据需要去开启，但这种方式会将你组件中不展示的图层也进行渲染只是不进行展示而已，如果了解前端的同学应该知道这就是
v-if和v-show的区别。
举一个例子，在我不太了解 Figma 的图层机制时，我曾经做了一个表单组件 FormItem 这个组件，可以有很多种属性支持开启：
这个组件在组件库里看起来很简单，其实就是我把全部表单中可能出现的组件类型全部塞到一个大组件里，然后通过布尔属性控制图层是否开启：
但实际上在页面中使用组件的时候，有非常多隐藏的图层，：
一个组件就有几十个隐藏的图层，一个表单中至少有五个以上的表单项，表单组件又可能被很多个页面引用或嵌套，这样隐藏的图层的数量就指数级上升了。
那么正确的做法是什么呢？其实就是使用变体来设计组件，还是以表单项组件为例，我在优化后的组件是这样的： 我将 FormItem 拆成了三个部分：
- Form Title 表单标题
- Form Component 表单组件
- HelperText 表单提示文案
这其中最主要的就是 Form Component 组件，我使用变体的方式创建了所有我需要的表单项类型，最终组合后我的组件是这样的：
表面上看和之前的效果一样，实际上的图层是这样的：
我在使用的时候只需要选中 FormItem 中的 Form Component 组件，然后切换它的 type 就切换为其他的表单组件类型。
通过这种方式，我将原本项目的图层从 140 万降低到了大概 100 万，效果还是很显著的。
| 优化前 | 优化后 |
|---|---|
插件推荐
这里我推荐两个用于分析项目中组件使用情况的插件，使用方式都很简单，这里不详细展开：
- Instance Finder：查找项目中未被引用的组件
- Unused Component：查找所有基于某个组件创建的实例
