背景
在开发时,项目启动编译时间过长,平均在120s~140s,观察到最高编译时间190s+;
严重影响开发效率,在多需求切换分支时尤为明显。
介绍
sucrase 是一款 JavaScript/TypeScript 编译器,目标是提供比标准Babel编译器更快的构建速度,在npm 的 sucrase的介绍中,被称之为babel的替代品,号称比babel 快20倍
sucrase 允许超快速开发,但它只能在最新node 6 以上及非ie浏览器中使用。
sucrase 是从babel派生而来,算是babel的子集
改造
安装 sucrase
npm install sucrase
安装 sucrase 的加载器
npm install @sucrase/webpack-loader
安装 针对sucrase 的webpack 对象结构语法的解析插件
npm install @sucrase/webpack-object-rest-spread-plugin
修改webpack.dev.js
1 添加sucrase 的加载器
2 注释babel的加载器 (webpack.config.base.js 中有也需要移出)
(注意:以上改造就是为了在开发环境运行时,不执行babel的编译,在打包时,需要babel执行编译,就要在生产环境编译的js中加入babel的加载器)
注意事项:
1 不支持解构语法 (安装上面说到的插件可解决)
2 不能使用装饰器,需要改造成函数使用
3 发现react-moment 也不能用 ,猜测可能是组件内语法问题
解决办法:把react-moment 组件替换为moment.js 使用
sucrase 的主要配置:
jsx:将JSX语法转换为React.createElement
typescript:将TypeScript代码编译为JavaScript,删除类型注释并处理诸如枚举之类的功能。
flow:删除流类型注释。
import:使用与Babel和TypeScript相同的方法将ES模块(import/ export)转换为CommonJS(require/ module.exports)–esModuleInterop
react-hot-loader:在react-hot-loader 项目中执行等效的转换
总结
1 sucrase 不检查代码是否错误
2 sucrase 主要特性是编译js 运行时永远不会支持的语言扩展(如:JSX、TypeScript、Flow)
3 sucrase 由于自身定位,不会生成es5的代码,所以不适合需要兼容老版本浏览器的项目,建议生产环境还是使用babel来构建编译
sucrase.js 的github地址:https://github.com/alangpierce/sucrase/tree/9a33fc30ece8c36f82af8662147c36dc28b2e016
其它编译优化方案分享
BABEL 设置最新浏览器配置 不编译es5api
公用插件 使用cdn
文件hash名未修改不编译
vite
rome
webpack5