首页
前端开发
Typescript
基于 Github Actions 的 Webpack React TypeScript 项目构建性能分析

基于 Github Actions 的 Webpack React TypeScript 项目构建性能分析

18 次浏览 0 条评论
zip
zip

该项目提供一个不依赖 Create React App (CRA) 的 React TypeScript 项目基础模板，通过自定义 Webpack 配置获得更高的灵活性。

项目启动

  • yarn : 安装依赖
  • yarn start : 启动开发服务器
  • yarn build: 构建生产环境代码
  • yarn test: 运行测试

使用的插件

  • Babel： 用于转译 React 和 TypeScript 代码
  • webpack-bundle-analyzer： 用于分析 JavaScript 包体积
  • fork-ts-checker-webpack-plugin： 用于 TypeScript 类型检查
  • style-loader, css-loader, sass-loader： 用于处理 CSS 模块
  • html-webpack-plugin： 用于生成 HTML 文件

Github Actions 集成

项目集成了 Github Actions 工作流，用于在每次代码提交时自动运行构建流程并收集性能指标。

zip
bundle-benchmark-pr-example-main.zip 预估大小：18个文件
folder
bundle-benchmark-pr-example-main 文件夹
file
package.json 2KB
file
babel.config.json 143B
folder
.github 文件夹
folder
workflows 文件夹
file
main-push.yml 715B
file
pr-bundle-stats.yml 878B
file
jest.config.js 232B
folder
src 文件夹
file
index.tsx 1KB
folder
components 文件夹
file
Button.tsx 318B
file
main.css 330B
file
tsconfig.json 6KB
file
.gitignore 31B
file
webpack.config.js 1KB
folder
public 文件夹
file
index.html 288B
file
README.md 631B
file
yarn.lock 320KB
folder
scripts 文件夹
file
upload-stats.js 1KB
file
statistician-generate.js 622B
file
fetch-main-stats.js 349B
file
bundle-diff.js 600B
zip 文件大小：135.61KB