Linux
Docker
Affine 二开、构建指南

Affine 二开、构建指南

affine 是一款很不错的笔记软件，奈何 web 版加载速度实在慢的离谱，首屏有 70 多次请求，我是部署在家里的树莓派，内网穿透到美国，延迟比较大，我已经将静态文件放在美国的机器，避免回源，但依然很慢。

移除遥测和 sentry

修改 packages/frontend/track/src/mixpanel.ts 文件里的 createMixpanel 函数，原始文件如下：

packages/frontend/track/src/mixpanel.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

function createMixpanel() {
  let mixpanel;
  if (BUILD_CONFIG.MIXPANEL_TOKEN) {
    mixpanelBrowser.init(BUILD_CONFIG.MIXPANEL_TOKEN || '', {
      track_pageview: true,
      persistence: 'localStorage',
      api_host: 'https://telemetry.affine.run',
      ignore_dnt: true,
    });
    mixpanel = mixpanelBrowser;
  } else {
    mixpanel = new Proxy(
      function () {} as unknown as OverridedMixpanel,
      createProxyHandler()
    );
  }
  // 其他代码，这里忽略
}

直接删除第一个 if 即可，修改后代码如下：

packages/frontend/track/src/mixpanel.ts
1
2
3
4
5
6
7

function createMixpanel() {
  let mixpanel = new Proxy(
      function () {} as unknown as OverridedMixpanel,
      createProxyHandler()
  );
  // 其他代码，这里忽略
}

修改 packages/frontend/core/src/components/telemetry/index.tsx 文件，原始代码如下：

packages/frontend/core/src/components/telemetry/index.tsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

useEffect(() => {
  if (settings.enableTelemetry === false) {
    sentry.disable();
    mixpanel.opt_out_tracking();
    return;
  } else {
    sentry.enable();
    mixpanel.opt_in_tracking();
    return enableAutoTrack(document.body, mixpanel.track);
  }
}, [settings.enableTelemetry]);

仅保留 if 里面的逻辑即可，修改后如下：

packages/frontend/core/src/components/telemetry/index.tsx
1
2
3
4
5

useEffect(() => {
  sentry.disable();
  mixpanel.opt_out_tracking();
  return;
}, [settings.enableTelemetry]);

以上修改，均是基于 v0.21.6 版本。

移除下载 app 的按钮

这个修改是最简单的，相关代码在：packages/frontend/core/src/modules/app-sidebar/views/app-download-button/index.tsx 这里，我们直接改为默认不展示即可，举个例子：

const [show, setShow] = useState(false);

这里，原始的值为 true；

字体使用 cdn 加载

修改 packages/frontend/core/src/blocksuite/extensions/font-config.ts 文件，原始内容如下：

1
2
3
4
5
6
7
8

export function getFontConfigExtension() {
  return FontConfigExtension(
    AffineCanvasTextFonts.map(font => ({
      ...font,
      url: environment.publicPath + 'fonts/' + font.url.split('/').pop(),
    }))
  );
}

将 environment.publicPath 改为你需要的 cdn 地址。
修改 packages/frontend/component/src/theme/fonts.css 将相对路径改为具体的 cdn 地址，举个例子：

1
2
3
4
5
6

@font-face {
  font-family: 'Inter';
  font-display: swap;Add commentMore actions
  src: url(../fonts/inter/Inter-VariableFont_slnt,wght.ttf);
  font-weight: 1 999;
}

将这里的第 4 行改为：

src: url(https://cdn.xxx.xxx/xxx/assets/Inter-VariableFont_slnt_wght.ttf);

自行构建 affine

这部分我目前还在探索，仅能构建 web，方法如下：

1
2
3

yarn
export BUILD_TYPE=stable
yarn affine @affine/web build

node js 的版本为：v20.19.0

js、css 使用 cdn 加载

首先，构建好 web，然后修改 selfhost.html，路径为：packages/frontend/apps/web/dist/selfhost.html
考虑将最后两行的引入的 js 放在 cdn

1
2

<script defer src="/js/vendor.f9037c78.js"></script>
<script defer src="/js/index.038e6411.js"></script>

这两个 js 文件太大了，放在 cdn 可大幅提高访问速度。

nginx 静态资源不回源

这块在 Docker 安装 AFFiNE 里也有提到，这里再简单补充下，nginx 配置如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2|zip|map)$ {
	set $custom_root /data/soft/affine/static;
	if ($http_referer ~* "note.kpromise.top/admin") {
		set $custom_root /data/soft/affine/static/admin;
	}
	root $custom_root;
	expires 7d;
	access_log off;
	try_files $uri $uri/ =404;
}

修改后，6s 内就可以加载完毕，而修改前，需要 30s 左右，修改后的代码：https://github.com/ijustyce/AFFiNE

最后更新于
Docker 安装 AFFiNE