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/manager/view.ts 文件，原始内容如下：

1
2
3
4

fontConfig: 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);

默认值修改

packages/frontend/core/src/desktop/dialogs/setting/general-setting/about/index.tsx 修改 113-114 行为：

1
2
3
4

<Switch
  checked={appSettings.enableTelemetry === true}
  onChange={() => onSwitchTelemetry(false)}
/>

packages/frontend/core/src/modules/editor-setting/schema.ts 修改第 23 行，改为：

fullWidthLayout: z.boolean().default(true),

packages/frontend/core/src/modules/i18n/entities/i18n.ts
第 23 行修改为：

function mapLanguageInfo(language: Language = 'zh-Hans'): LanguageInfo

init 方法修改为：

1
2
3

init() {
  this.changeLanguage(this.currentLanguageKey$.value ?? 'zh-Hans');
}

packages/common/infra/src/atom/settings.ts 33-35 行改为：

1
2
3

autoCheckUpdate: false,
autoDownloadUpdate: false,
enableTelemetry: false,

字体样式和大小

blocksuite/affine/blocks/code/src/styles.ts
删除 .affine-code-block-container 样式下的：font-size: var(–affine-font-xs);
并新增：tab-size: 2;
修改：.affine-code-block-container .inline-editor，font-family 改为: ‘Cascadia Code’,‘LXGW WenKai Screen’,‘Source Code Pro Semibold’,‘Microsoft YaHei’;
删除 .affine-code-block-container .line-number 中的 font-size: var(–affine-font-xs);
修改：packages/frontend/component/src/theme/global.css 在 :root 下新增：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

--affine-font-family:
  'LXGW WenKai Screen', 'Cascadia Code', 'Source Code Pro Semibold',
  'Microsoft YaHei';
--affine-font-sans-family:
  'LXGW WenKai Screen', 'Cascadia Code', 'Source Code Pro Semibold',
  'Microsoft YaHei';
--affine-font-code-family:
  'Cascadia Code', 'LXGW WenKai Screen', 'Source Code Pro Semibold',
  'Microsoft YaHei';
--affine-font-mono-family:
  'Cascadia Code', 'LXGW WenKai Screen', 'Source Code Pro Semibold',
  'Microsoft YaHei';

修改：packages/frontend/apps/electron-renderer/src/app/global.css 新增：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

:root {
  --affine-font-family:
    'LXGW WenKai Screen', 'Cascadia Code', 'Source Code Pro Semibold',
    'Microsoft YaHei';
  --affine-font-sans-family:
    'LXGW WenKai Screen', 'Cascadia Code', 'Source Code Pro Semibold',
    'Microsoft YaHei';
  --affine-font-code-family:
    'Cascadia Code', 'LXGW WenKai Screen', 'Source Code Pro Semibold',
    'Microsoft YaHei';
  --affine-font-mono-family:
    'Cascadia Code', 'LXGW WenKai Screen', 'Source Code Pro Semibold',
    'Microsoft YaHei';
}

自行构建 affine

我使用的 node js 的版本为：v20.19.0

构建 web： 

1
2
3

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

构建 electron

需要先安装 rust，具体参考官网：https://www.rust-lang.org/tools/install，后续可通过如下脚本构建：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

#!/bin/bash
echo '========== 1.setup =========='
corepack enable
corepack prepare yarn@stable --activate
echo '========== 2.clean up =========='
find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +
echo '========== 3.install dependency =========='
yarn config set nmMode hardlinks-local
yarn config unset nmHoistingLimits
yarn
echo '========== 4.native build =========='
export BUILD_TYPE="stable"
yarn affine @affine/native build
echo '========== 5.server build =========='
yarn affine @affine/server-native build
echo '========== 6.electron build =========='
yarn affine @affine/electron build
echo '========== 7.electron generate-assets =========='
yarn affine @affine/electron generate-assets
echo '========== 8.clean up =========='
find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +
echo '========== 9.tmp fix dependency =========='
cd packages/frontend/apps/electron && yarn && cd -
yarn config set nmMode classic
yarn config set nmHoistingLimits workspaces
echo '========== 10.install dependency =========='
yarn
echo '========== 11.make =========='
SKIP_WEB_BUILD=1 HOIST_NODE_MODULES=1 yarn affine @affine/electron make
yarn config set nmMode hardlinks-local
yarn config unset nmHoistingLimits

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