跳到主要内容位置

升级 Docusaurus 到 3.6,打包速度只需 5 秒钟

张旭乾
软件工程师 / B站UP主

这几天我把 Docusaurus 升级到了 3.6,主要是因为这个版本引入了 Rspack 和 SWC 等库,把打包速度提升了好几倍。以前打包大概要一两分钟,现在只需要五六秒就搞定了!

新的打包库, Rspadck, SWC, Lightning CSS

升级过程其实很简单,就是在 package.json 里把版本号改成最新的 3.6.1(当下最新版)。

"@docusaurus/core": "3.6.1",
"@docusaurus/plugin-debug": "3.6.1",
"@docusaurus/plugin-ideal-image": "3.6.1",
"@docusaurus/preset-classic": "3.6.1",
"@docusaurus/remark-plugin-npm2yarn": "3.6.1",
"@docusaurus/theme-common": "3.6.1",
"@docusaurus/theme-live-codeblock": "3.6.1",
"@docusaurus/utils": "3.6.1",
"@docusaurus/utils-common": "3.6.1",

然后呢,要用上这个快速打包功能,还得额外装个 @docusaurus/faster 插件,它可以按需启用,不会破坏现有代码。

首先,用 Yarn 安装这个插件:

yarn add @docusaurus/faster

然后,在 docusaurus.config.js 里加一行配置,把 future.experimental_faster 设为 true 就好了:

module.exports = {
// ...其他配置
future: {
experimental_faster: true,
},
};

这样就能开启快速打包,启用了 SWC 和 Rspack 等技术。

然后我们运行构建命令:

yarn build

可以看到打包速度真的快了很多!强烈推荐升级一下,绝对能提升你的开发效率!

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,包含 React、React Router 和 Redux 详细介绍,所有示例改编自真实工作代码。点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买