## 产物分块的好处

构建产物分块，可减少单个 js 的体积，防止依赖重复打包，增加整体网页静态资源的加载速度。

另外往往可把 node_modules 内的三方库单独拆分为一个或多个 chunks ，因为它们不常改变，最终 hash 不变，可更有效利用浏览器缓存。

而常变的业务代码拆分后体积都很小，前端发版后只有这些业务代码缓存失效，可请求更少的内容。

## splitVendorChunkPlugin

可引用 splitVendorChunkPlugin 插件来启用 vite 的默认分块策略，即类似于 vue-cli 默认的策略，将 node_modules 内的库打到 vendor 中。

```typescript
import { splitVendorChunkPlugin } from 'vite'
export default defineConfig({
  plugins: [splitVendorChunkPlugin()]
})
```

## 定义 manualChunks

可通过 `build.rollupOptions.output.manualChunks` 配置分割策略，使用方式安装 rollup 文档： https://rollupjs.org/configuration-options/#output-manualchunks

如将 antd 相关的依赖单独打包为 chunks：

```typescript
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'antd-libs': ['antd', '@ant-design/pro-components'],
        },
      },
    },
  },
})
```


vite 构建产物分块策略


博客图片需要进行放大、切换等效果，引入 viewerjs 这种第三方组件，可以快速获得丰富、完善的图片播放功能。

https://fengyuanchen.github.io/viewerjs/

安装

```
npm install viewerjs
```

使用：

引入样式：

```js
import 'viewerjs/dist/viewer.css';
```

useEffect 中初始化：

```js
const ref = useRef<HTMLDivElement>();
useEffect(() => {
  const viewer = ref.current ? new Viewer(ref.current, {}) : null;
  return () => {
    viewer && viewer.destroy();
  };
}, []);
```

定制工具栏：

```js
new Viewer(ref.current, {
  toolbar: {
    zoomIn: 4,
    zoomOut: 4,
    reset: 4,
    prev: 4,
    next: 4,
    rotateLeft: 4,
    rotateRight: 4,
  },
}) 
```

本站已引入该组件，图片预览测试：

![cat](https://heibaimeng.com/uploads/2023/04/08/3e1fe010484f2aed01df2ca8574423c3.jpg)

![dog](https://heibaimeng.com/uploads/2023/04/08/1ba1a178ecf876e296da62b2513f0ec3.jpg)

viewerjs 易用的图片查看组件

尝试将博客管理端升级为 vite，升级的过程基本没遇到坑，几乎无缝完成升级。

## 创建 vite 项目

通过 `npm create vite@latest` 创建 React TypeScript + SWC 项目，然后将核心文件复制到项目中：

- src/vite-env.d.ts
- index.html
- tsconfig.json
- tsconfig.node.json
- vite.config.ts

把 index.html 中引入的文件直接改成项目中的入口文件。

## 启动与打包指令

- 启动：`react-scripts start` 改为 `vite`
- 打包：`react-scripts build` 改为 `vite build`

## 端口和基础路径

移除原有的 .env 配置：

```env
PORT = 3030
PUBLIC_URL = /admin
```

`vite.config.ts` 中增加配置：

```js
base: '/admin/',
server: {
  port: 3030,
},
```

使用： `process.env.PUBLIC_URL` 改为 `import.meta.env.BASE_URL`

## 环境变量

- 定义：`REACT_APP_XXX` 改为 `VITE_API_XXX`
- 前端代码中调用：`process.env.REACT_APP_XXX` 改为 `import.meta.env.VITE_API_XXX`
- 在 `vite.config.ts`  中调用： `process.env.VITE_API_XXX` 

## 本地代理

移除 `setupProxy.js`，改为使用 vite 的代理：

```js
server: {
  port: 3030,
  proxy: {
    '/xxx': {
      target: process.env.VITE_XXX,
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/xxx/, ''),
    },
  },
}, 
```

## 完成升级

经过以上的这些操作，整个项目就可以完好的跑起来了，路由、antd及其他第三方依赖运行起来都很正常。然后就是移除掉 react-scripts 相关的依赖和配置文件，即完成全部升级过程。

升级为 vite 后，启动和热更新速度都得到较大提升，基本是 1 秒内即可完成项目启动，尤大实在是太强了。



react-scripts 项目升级至 vite

 Ant Design 5.x 升级后，整体依赖的配置大大减少，更容易引入。

## 移除 less

Ant Design 5.0 中移除了 less 的使用，改为 css-in-js，这意味着引入它不再需要进行一堆的配置，更容易在更多环境下引入，也不会污染项目原因的全局样式了。

记录一下原有的 4.0 项目升级的过程：

- 移除 craco，恢复使用 react-scripts
- 移除脚手架中对 less 的设置
- 移除 babel-plugin-import
- 移除对 antd 的 less 文件的引用

## 定制主题

改为通过设置 theme，传入 token 去设置。

```js
<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#333333',
      colorPrimaryBg: '#fafafa',
      controlOutline: 'rgb(51,51,51,.2)',
      colorLink: '#FFC725',
      colorLinkActive: '#d9a116',
      colorLinkHover: '#ffd94f',
    },
  }}
  locale={zhCN}
>
</ConfigProvider>
```

## 使用自定义变量信息

通过 useToken 可读取到当前的变量信息，这样就可以使用到其他的 js 组件中。

```js
import { theme } from 'antd';
const { useToken } = theme;

let { token } = useToken();
```

token 里的变量值也是自定义主题中的可设置值，发现哪里不合适进行一下设置即可。

## 在 CSS 变量中共享主题样式

也可以通过 style 标签，把这些变量导入到 css 变量中：

```js
const CssTheme: React.FC = () => {
  let { token } = useToken();
  const globalVars = `html {
    --ant-color-primary: ${token.colorPrimary};
    --ant-color-primary-hover: ${token.colorPrimaryHover};
    --ant-control-outline: ${token.controlOutline};
    --ant-color-link: ${token.colorLink};
    --ant-screen-sm: ${token.screenSM};
    --ant-color-link-active: ${token.colorLinkActive};
    --ant-color-link-hover: ${token.colorLinkHover};
  }`;
  return <style>{globalVars}</style>;
};
export default CssTheme;
```

这样在原有使用  less 变量的项目样式文件中，就可以改为对应的 CSS 变量了，改动量小。

升级 Ant Design 5.x，构建项目定制主题，并在 CSS 变量中共享主题样式

总的来说，如果不是引用了一些额外的配置，比如 craco、less 等，React 18 的升级还是比较简单，整体比较平滑。

## 升级依赖版本

react / react-dom 升级为 18.x

## 根组件引用

从 `ReactDOM.render` 改为 `createRoot` 模式：

```js
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root') as HTMLElement;
const root = createRoot(container);

root.render(<App />)
```

然后项目就可以跑起来了。

## react-scripts 升级

react-scripts 升级为 5.0.1，也就是升级到  webpack 5.0。

代理中间件引入改为：

```js
const { createProxyMiddleware } = require('http-proxy-middleware');
```

除了以上改动，其他都可以很好的运行起来。

## next.js 升级

将 next.js 版本升至 13.x 即可，都不需要改“根组件引用”部分的代码，升级后即可使用。


React 18 升级记录

笔记做在 git 仓库有个好处就是每次的修改都可以追溯，第三方笔记服务也有这功能但往往会是收费或受限服务。

在博客里写笔记，包括很多专门博客网站，历史版本会是一个比较缺失的功能。其实仔细想想，文章历史版本自研的话还是比较简单的。

## 记录文章快照

创建一个专门的文章历史记录表，字段为文章表需要记录快照的字段。

在保存文章时，顺便存一份到文章历史记录表即可。为每篇文章提供一个历史记录列表，支持查询和对比。

如果有需要，也可以在历史记录列表中增加删除功能，把不需要的记录删除，数据层面使用软删除，这样就能保留每一次保存的版本，也能控制界面上的记录。

配合上之前的前端缓存功能，和编辑页面退出自动拦截的功能，基本可以有效的避免手滑导致的文章内容丢失了。

## 比较版本差异

https://www.npmjs.com/package/diff

通过 `diff` 这个 npm 包，可以计算出两段文本的差异。

```js
const diff = Diff.diffChars(one, other);

let res = '';

diffContent.forEach((part) => {
    const color = part.added ? 'green' : part.removed ? 'red' : 'grey';
    res += `<span style="color: ${color}">${part.value.replaceAll(/\n/g, '<br />')}</span>`;
});
```

将 res 的这段 HTML 文本渲染即可。 

本博客使用 markdown，把文章内容当作代码直接展示差异了，仅处理了一下换行符转为换行标签。如果是富文本，可转换为纯文本后比较。

文章历史版本快照功能开发

## 博客的 PHP 历程

博客从 2015 年建立之初，后端就一直是 PHP 的技术栈，从开始的 WordPress，到 ThinkPHP + Hui-Admin，到改为前后端分离的前台页面 + 后端 Yii2、管理端 React，再到最近把前台页面使用 Next.js 重构。

由于购买的虚拟机环境是基于 PHP，价格很便宜，部署很方便。PHP 在不断的更新，Yii2 非常稳定。但最近给博客加了个专栏功能，发现效率比较慢。多年未正经使用 PHP，我发现对它越来越生疏了。

## 博客后端的新技术栈

确认可行后，在此前做过的多个 Node.js 的 Demo 中选了一个作为基础，把整个网站的功能用 Node.js 重构了。全面使用 TypeScript 语言，Web 框架是 Express，数据库 ORM 是 Sequelize，通过 reflect-metadata 实现类装饰器指定路由，结合 Class Validator 实现 DTO 及数据校验功能。

这样一来，整个博客前台前端、后台前端及后端接口都使用了 TypeScript ，也全面接入了 Web 前端的生态中。

博客后端全面迁移至 Node.js

## 弃用分类功能之后

博客之前是“分类-文章”的模型，但“分类”功能让写文章多了一个很重的负担，分类粒度太大又没有了意义，粒度太小又太过繁琐，分类的层级也可能会有冲突。每写一篇文章还得先把对应分类给维护好。

后来，决定把分类功能直接移除掉了，写起来是容易一些。但这样，多篇文章又变得有些散乱，缺乏结构化的关系。

## 专栏功能

目前很多程序员博客门户，比如掘金、知乎、简书，“分类”功能都是比较少了，比如掘金的分类是属于全站的，而他们都有一个功能：专栏，可以把不同的文章组织在一起。
专栏既可以让一些有关联的文章形成结构化，也不是一篇文章的必需品，不会造成负担，还可以把一篇文章归类到多个专栏里，目前来看是比较适合的。


博客增加专栏功能


写博客时因为是在浏览器操作，很可能按错某个快捷键，页面就被关掉了，这样辛苦写的内容也会丢失。

即使有了文章草稿功能，页面被关掉也难保会有少量内容丢失，操作也麻烦。所以如果能拦截提示一下，就友好很多了。

## 编辑文本时记录状态

```js
const [isChanged, setIsChanged] = useState(false);
```

使用 isChanged 记录当前是否存在未保存的数据。修改时记录，保存后重置。

## 阻止浏览器关闭

通过浏览器的 API，阻止浏览器关闭。参见： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/beforeunload_event

使用 useEffect 对 isChanged 进行监听，按需对 beforeunload 事件进行绑定和解绑。

```js
useEffect(() => {
  const onBeforeunload = (event: BeforeUnloadEvent) => {
    event.preventDefault();
    event.returnValue = '';
  };
  if (isChanged) {
    window.addEventListener('beforeunload', onBeforeunload);
  } else {
    window.removeEventListener('beforeunload', onBeforeunload);
  }

  return () => {
    window.removeEventListener('beforeunload', onBeforeunload);
  };
}, [isChanged]);
```

## React Router Prompt 拦截路由退出

单页应用浏览器点击回退或前进按钮时，很有可能会触发路由的切换，这时仅通过浏览器 API 就防不住了，需要在路由层面来控制。

React Router 提供了一个 Prompt 组件，可以在路由切换时按需发出提示。

```js
import { Prompt } from 'react-router-dom';

<Prompt when={isChanged} message="是否离开页面? 你所做的更改可能未保存。" />
```

配合 isChanged，改变值时，阻止页面退出。
## 总结

以上，通过浏览器的阻止页面关闭事件，配合 React Router Prompt，实现“刷新、关闭页面”和“浏览器回退按钮”双重拦截。


React 实现编辑页面异常退出自动拦截的功能

### 视图层升级：从 PHP 到 Next.js

作为博客站点，从 SEO 等角度，HTML 代码预生成的能力是必须的。由于成本考虑，博客一直使用 PHP 虚拟主机，所以一直使用了 PHP 的服务端渲染。

但是 PHP 视图层的开发体验，与现有的前端生态较难接轨，开发效率不佳。在了解 Next.js 时，看到了静态页面生成 SSG (Static Site Generation) 的方案，这让我眼前一亮。

用了几个小时的试验，成功将视图层从 PHP 升级到了 Next.js。

### 实现博客列表页、详情页

使用 `npx create-next-app@latest` 快速创建了 ts 的项目模板，结合 [Pre-rendering and Data Fetching](https://nextjs.org/learn/basics/data-fetching)官方文档教程，很快的将博客列表页、详情页渲染了出来。

比如，对于博客的列表页，创建 `/posts/${page}` 规则的路由。这里为了减少 DOM 渲染，还是保留了分页逻辑。

在 `getStaticPaths` 中，计算一共需要生成多少个“列表页”。先拉去总共的文章数量，每 20 篇文章生成一个列表页。

```ts
interface Params extends ParsedUrlQuery {
  page: string;
}
export const getStaticPaths: GetStaticPaths<Params> = async () => {
  let { totalPage } = await getPostList({ page: 1, count: 20 });
  return {
    paths: Array.from({ length: totalPage }).map((_, index) => {
      return {
        params: { page: (index + 1).toString() },
      };
    }),
    fallback: false,
  };
};
```

在 `getStaticProps` 中，为每个页面拉取数据，比如第 5 页，就会去接口拿第五页的 20 篇文章进行渲染。

```ts
export const getStaticProps: GetStaticProps<PostListProps, Params> = async (context) => {
  const { page } = context.params! as Params;
  let { posts, current, pageSize, totalCount } = await getPostList({
    page: Number(page) || 1,
    count: 20,
  });
  return {
    props: {posts, current, pageSize, totalCount,},
  };
};
```

通过这样的数据获取，在构建时，页面组件会接受入参，进行渲染和处理即可。

```ts
export default function PostDataListPage({ posts, current, pageSize, totalCount }: PostListProps) {
  return <div> ... </div>;
}
```

### 实现搜索页面

对于动态搜索，也是必不可少的。 SSG 方案的妙处在于，它会将入参数据生成为 json 文件，能作为动态数据处理。

在文章列表页的基础上，提取了文章列表、分页等样式作为文章列表样式组件，在原有的 pages 下只做数据处理，并创建 `/pages/search` 页面用于处理搜索：

- 入参 posts 代表全部文章数据，这个会在构建时存储到页面中。
- 使用 data 表示过滤后的数据，使用 page 表示当前的页码，通过 slice 计算出当前页应当渲染的 20 篇文章。
- 使用 qeury.v 来表示用户输入的过滤文本，结合路由 query 参数的改变，更新过滤页面应该展示的 data 数据。

```js
const router = useRouter();
const [data, setData] = useState<Post[]>([]);
const [page, setPage] = useState(1);

const getData = () => {
  let val = router.query.v.toLocaleLowerCase();
  setData(
    posts.filter((item) => {
      return (
        item.title.toLocaleLowerCase().includes(val) ||
        item.remark.toLocaleLowerCase().includes(val) ||
        item.content.includes(val)
      );
    }),
  );
  setPage(1);
};

useEffect(() => {
  getData();
}, [router.query.v, posts]);

const limitNum = (page - 1) * 20;
const viewPosts = data.slice(limitNum, limitNum + 20);
```

在文章数据不多的情况下，这个搜索方案也可以获得较快的速度。

### 升级效果

视图层的本次升级，开发体验和站点性能都得到了较大提升。

开发体验：

- 甩开视图层的 PHP 接口服务变得更加纯粹，只需专注于后端业务逻辑。
- Next.js 让这台廉价的虚拟主机能够保持 SEO 能力的同时，轻易的用上 React、TypeScript 等主流的前端技术。
- 纯静态一直以来是 PHP 站点的重要优化方案，但会增加了较大复杂度，而在 Next.js 中使用很简单的前端代码，就能够完成这一切。

站点性能：

- 比起传统的纯静态方案，Next.js 的 SSG 更具备了预渲染的能力。
- 并且，它在进入下一个路由时，不是直接跳转页面，而是作为单页应用，去加载 json 数据，直接渲染。
- 这使得页面之间的切换变得极快，无需访问数据库，也无需加载额外的前端页面及静态资源。


使用 Next.js 的 SSG 方案，接管博客渲染层，实现纯静态+单页应用+预渲染效果


## 场景

经常在网页编辑写文章的人，可能都会遇到过这种场景：手滑了，或者浏览器崩溃了，编辑的内容丢失了。

为了避免这种情况，需要加入前端缓存功能。

## 思路

自动缓存可以做得很复杂，比如加一个缓存草稿箱、加一个版本系统等等，这些对于黑白梦这样简单的博客来说，就显得有些过度设计了。

最后经过讨论，博客使用了一个最简单的缓存方案。

- 新增场景：保存一份缓存数据，作为新增数据
- 编辑场景：本地缓存增加一个时间戳标记，与文章 update_time 进行对比，如果缓存比文章更新，则覆盖
- 文章保存后，清除缓存

## 实现

使用 ant-design 的 Form 组件，监听值改变事件，进行 handleAutoSave 自动缓存设置。

```jsx
 <Form
      initialValues={getInitialValues()}
      onValuesChange={(values) => handleAutoSave()}
    >
</Form>
```

利用 lodash 的节流工具，编写一个自动保存函数，将所有值存入 localStorage 即可。

```ts
import { throttle } from 'lodash';

const handleAutoSave = throttle(() => {
  const values = form.getFieldsValue();
  localStorage.setItem(
    LOCAL_KEY,
    JSON.stringify({
      ...values,
      _localTimestramp: +new Date(),
    }),
  );
}, 5000);
```

当进入页面时，通过 getInitialValues 方法获取值。

```ts
const getInitialValues = () => {
  const defaultData = tempRecord || {};
  const localDataStr = localStorage.getItem(LOCAL_KEY);

  const localData = localDataStr ? JSON.parse(localDataStr) : null;
  if (localData && localData._localTimestramp && localData._localTimestramp) {
    const lastAutoSavedTimestramp = localData._localTimestramp;
    // 新增，或缓存修改时间比文章修改时间更新
    if (
      isAdd ||
      (tempRecord &&
        tempRecord.update_time &&
        lastAutoSavedTimestramp > +new Date(tempRecord.update_time))
    ) {
      return localData;
    }
  }

  return defaultData;
};
```

保存成功后，删除缓存，即可避免影响下次的新增或编辑。

```ts
const handleSave = (values: Store) => {
  localStorage.removeItem(LOCAL_KEY);
  onFinish({
    ...values,
    status: PostStatus.isPublished,
    publish_time:
      isAdd || (tempRecord && tempRecord.status === PostStatus.isPublished)
        ? parseTime(new Date())
        : undefined,
  });
};
```

文章编辑时的前端自动缓存功能思路与实现


## 场景

博客在编写的过程中，文章写到一半，想要保存而非发布，目前无法做到，只能临时保存到本地文件过渡。

## 思路

新增文章场景：

- 文章未能发布，照样保存到数据库，但设置文章状态为“草稿”。
- 文章发布后，自动生成发布时间，前台展示发布时间，而非文章创建时间。

修改文章场景：

- 未发布的文章，可以继续编写，继续存为草稿或发布。
- 文章已发布，可重新放置回草稿箱，也可以直接修改。

## 实现

增加两个字段：

- 文章状态 status
- 发布时间 publish_time

判断不同的状态，按钮显示不同的内容：

```js
const isPublished = isAdd || (tempRecord && tempRecord.status === PostStatus.isDraft);
```

按钮也从单个保存按钮，改为“存为草稿”与“发布”两个按钮。

- 存为草稿按钮，不校验相关字段必填等情况
- 发布按钮，校验所有必填信息

```html
<Button htmlType="button" style={{ marginRight: '30px' }} onClick={handleSaveToDraft}>
  {isPublished ? '存为草稿' : '重新转入草稿'}
</Button>

{/* 在 Form 组件的 onFinish 属性中监听 */}
<Button type="primary" htmlType="submit">
  {isPublished ? '发布' : '更新'}
</Button>
```

存为草稿的操作：

```js
const handleSaveToDraft = () => {
  const values = form.getFieldsValue();

  onFinish({
    ...values,
    status: PostStatus.isDraft,
  });
};
```

发布的操作，判断当新增时或文章未发布时，设置 publish_time

```js
const handleSave = (values: Store) => {
  onFinish({
    ...values,
    status: PostStatus.isPublished,
    publish_time:
      isAdd || (tempRecord && tempRecord.status === PostStatus.isDraft)
        ? parseTime(new Date())
        : undefined,
  });
};
```

文章草稿功能开发思路与实现

最近，将博客的文章编辑器从富文本改为了 markdown 编辑器，为了最终渲染的效果，需完成富文本的转化。

## 前端渲染

我们可以通过 marked 和 markdown-it 等库，把markdown 为 html 文本。

如使用 marked 转换 markdown 为 html：

```js
const renderer = new marked.Renderer()

const value = '某段markdown文本'

var renderer = new marked.Renderer()
var htmlStr = marked(value, {
  breaks: true,
  headerIds: false,
  renderer: renderer,
})
```

## 富文本样式配置

通过以上方式，虽然解析了 markdown 为富文本，但没有配套样式。可以在一些文档项目中把 css 部分拿来使用。

博客之前用的是 quill 这个富文本编辑器，所以沿用了 quill 的样式。

```html
<div class="post-content ql-snow">
    <div class="ql-editor">
        
    </div>
</div>
```

## 代码高亮

使用 highlight 进行代码高亮。比如在 marked 的 highlight 属性传入函数，处理需要高亮的富文本代码即可。

```
marked.parse(post.content, {
    breaks: true,
    headerIds: false,
    highlight(code, lang) {
        return hljs.highlight(code, { language: lang }).value;
    },
    renderer: renderer,
  });
};

```

通过 marked 渲染 markdown 为富文本格式，并设置样式、代码高亮


## 实现代码高亮

常用的富文本编辑器，具有代码块功能，但没有代码高亮，这里引入 highlight.js 实现高亮。

highlight.js 网站: https://highlightjs.org/

### 引入

方式一，通过 npm 引入：

```
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';
```

方式二，直接引入 highlight.js 资源文件，适用于未使用 npm 包管理的项目：

- 1、从官网按需下载常用语言
- 2、引入从官网下载的 atom-one-dark.css 和 highlight.pack.js
- 3、处理需要高亮的富文本代码

```html
<link href="/highlight/atom-one-dark.css" rel="stylesheet">
<script src="/highlight/highlight.pack.js"></script>
```

### 操作

自动格式化：

```js
hljs.highlightAll()
```

返回 html 文本：

```js
var html = hljs.highlightAuto('<h1>Hello World!</h1>').value
```

按特定的语言进行高亮：

```js
var html = hljs.highlight('<h1>Hello World!</h1>', {language: 'xml'})
```

## 小程序中使用

兼容小程序，提取出 pre 的部分，换行处理：

```js
let pre = /<pre>[\s\S]*?<\/pre>/g // "."是不会匹配换行的
let arr = htmlStr.match(pre)
arr.forEach(item => {
  htmlStr = htmlStr.replace(item, item.replace(/\n/g, "<br />"))
})
```

转换weapp不支持的标签，小程序没有pre、blockquote标签，使用div替代，就可以在小程序中显示：

```js
htmlStr = htmlStr
  .replace(/<pre>/g, '<div class="pre">')
  .replace(/<\/pre>/g, "</div>")
  .replace(/<blockquote>/g, '<div class="blockquote">')
  .replace(/<\/blockquote>/g, "</div>")
```

小程序中显示，使用rich-text组件：

```js
<rich-text nodes="{{htmlStr}}"></rich-text>
```

将引入的样式文件，将 pre 和 blockquote 相关的样式拷贝多一份为 .pre 和 .blockquote 的样式。


黑白梦博客建设分享