Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] build: 构建产物调整, 使用 Bundless 的方式输出, 支持 tree shaking [BREAK CHANGE] #2754

Closed
wants to merge 12 commits into from

Conversation

lijinke666
Copy link
Member

@lijinke666 lijinke666 commented May 30, 2024

👀 PR includes

🔧 Chore

  • Test case
  • Docs / demos update
  • CI / workflow
  • Release version
  • Other (打包输出文件优化)

📝 Description

  • 使用 father 进行打包, 按源码目录生成 bundless ESM 构建产物 (单个大文件 tree shaking 无法生效)
  • 抽取公用打包配置
  • 解决包文件循环依赖问题
  • s2-shared 需要跳过 bundless, 直接变成 bundle

📦 构建产物调整

  • ESModule/CommonJS

所有包的 ESModule (esm)CommonJS (lib) 构建产物从 Bundle 调整为 Bundless, 其所依赖的子模块会被直接拷贝输出,不再做编译,以便于更好的支持代码 tree shaking, 减少包体积。

由于 @antv/s2-shared 是未发布的包, 只作用公用模块使用, 所以作为子目录拷贝进 s2-(react/react-componnents/vue) 中进行 Bundle 构建. 以兼容 Bundless 的方式.

  • UMD

所有包的 UMD (dist) 构建产物依然为 Bundle 单文件,文件名全局变量名有所调整:

包名 文件名(修改前) 文件名(修改后)
@antv/s2 dist/index.min.js dist/style.min.css dist/s2.min.css dist/s2.min.css
@antv/s2-react dist/index.min.js dist/style.min.css dist/s2-react.min.css dist/s2-react.min.css
@antv/s2-vue dist/index.min.js dist/style.min.css dist/s2-vue.min.css dist/s2-vue.min.css
包名 全局变量名(修改前) 全局变量名(修改后)
@antv/s2 S2 S2
@antv/s2-react S2-React S2React
@antv/s2-vue S2-Vue S2Vue

🖼️ Screenshot

Before After
image image

🔗 Related issue link

close #2404

🔍 Self-Check before the merge

  • Add or update relevant docs.
  • Add or update relevant demos.
  • Add or update test case.
  • Add or update relevant TypeScript definitions.

Copy link

vercel bot commented May 30, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
antvis-s2 ❌ Failed (Inspect) Jun 26, 2024 9:15am

@github-actions github-actions bot added the next 2.0-next 版本的问题 label May 30, 2024
Copy link
Contributor

github-actions bot commented May 30, 2024

你好, @lijinke666 CI 执行失败, 请点击 [Details] 按钮查看, 并根据日志修复

Hello, @lijinke666 CI run failed, please click the [Details] button for detailed log information and fix it.

@github-actions github-actions bot added the 🚨 lint failed 静态检查失败 label May 30, 2024
Copy link
Contributor

github-actions bot commented May 30, 2024

Size Change: +24.8 kB (+7.61%) 🔍

Total Size: 350 kB

Filename Size Change
./packages/s2-core/dist/index.min.js 0 B -228 kB (removed) 🏆
./packages/s2-core/dist/style.min.css 0 B -402 B (removed) 🏆
./packages/s2-react/dist/index.min.js 0 B -69.6 kB (removed) 🏆
./packages/s2-react/dist/style.min.css 0 B -3.9 kB (removed) 🏆
./packages/s2-vue/dist/index.min.js 0 B -21.8 kB (removed) 🏆
./packages/s2-vue/dist/style.min.css 0 B -1.98 kB (removed) 🏆
./packages/s2-core/dist/s2.min.css 492 B +492 B (new file) 🆕
./packages/s2-core/dist/s2.min.js 258 kB +258 kB (new file) 🆕
./packages/s2-react/dist/s2-react.min.css 4.16 kB +4.16 kB (new file) 🆕
./packages/s2-react/dist/s2-react.min.js 80.1 kB +80.1 kB (new file) 🆕
./packages/s2-vue/dist/s2-vue.min.css 247 B +247 B (new file) 🆕
./packages/s2-vue/dist/s2-vue.min.js 6.85 kB +6.85 kB (new file) 🆕

compressed-size-action

@codecov-commenter
Copy link

codecov-commenter commented May 30, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 80.19%. Comparing base (ecdc9c8) to head (bb31640).
Report is 372 commits behind head on next.

Additional details and impacted files
@@            Coverage Diff             @@
##             next    #2754      +/-   ##
==========================================
+ Coverage   75.77%   80.19%   +4.42%     
==========================================
  Files         257      176      -81     
  Lines       11994    10170    -1824     
  Branches     2464     2330     -134     
==========================================
- Hits         9088     8156     -932     
+ Misses       1398      597     -801     
+ Partials     1508     1417      -91     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@lijinke666 lijinke666 changed the title build: esm 模块按目录打包, 使用 bundless 的方式支持 tree shaking [WIP] build: esm 模块按目录打包, 使用 bundless 的方式支持 tree shaking May 31, 2024
@lijinke666 lijinke666 changed the title [WIP] build: esm 模块按目录打包, 使用 bundless 的方式支持 tree shaking build: 构建产物调整, 使用 Bundless 的方式输出, 支持 tree shaking [BREAK CHANGE] Jun 20, 2024
@@ -0,0 +1,134 @@
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

和之前的配置没变, 之前这几个包打包配置都是复制的, 重复率有点高, 抽了下, 现在使用 father 打包, 用不到了 (暂时保留, 以免有啥问题)

@@ -2,12 +2,12 @@ import { isEmpty } from 'lodash';
import { CellType } from '../common/constant';
import { CellBorderPosition, type ViewMeta } from '../common/interface';
import type { SpreadSheet } from '../sheet-type';
import { getBorderPositionAndStyle } from '../utils';
import { renderLine, renderPolygon } from '../utils/g-renders';
import { getBorderPositionAndStyle } from '../utils/cell/cell';
Copy link
Member Author

@lijinke666 lijinke666 Jun 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

路径/函数移动 都是解决循环依赖.

@@ -0,0 +1,140 @@
import { find, forEach, includes, isEqual } from 'lodash';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

移位置, 忽略

@github-actions github-actions bot removed the 🚨 lint failed 静态检查失败 label Jun 20, 2024
@lijinke666 lijinke666 changed the title build: 构建产物调整, 使用 Bundless 的方式输出, 支持 tree shaking [BREAK CHANGE] [WIP] build: 构建产物调整, 使用 Bundless 的方式输出, 支持 tree shaking [BREAK CHANGE] Jun 21, 2024
},
umd: {
alias: {
'@antv/s2': path.resolve(__dirname, 'packages/s2-core'),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

避免 bundle 时找不到 antv/s2 的问题


export default (name: string) => {
const alias = {
'@antv/s2-shared': path.resolve(process.cwd(), './src/shared'),
Copy link
Member Author

@lijinke666 lijinke666 Jun 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

增加一个 shared 的子目录, 将 s2-shared 跳过 Bundless 的处理, 直接编译

image

@@ -22,8 +22,10 @@ if (window) {

// 本地通过 monorepoRedirect link 时不需要引入样式, 发布时引入, 避免样式丢失
if (process.env.NODE_ENV === 'production') {
(window as any).s2CSS = require('@antv/s2/dist/style.min.css');
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

文档相关的改动直接忽略, 都是批量替换

@@ -5,7 +5,7 @@
"strictPropertyInitialization": false,
"allowSyntheticDefaultImports": true,
"module": "esnext",
"declaration": false,
"declaration": true,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

使用 ts 自带的类型生成, s2-vue 除外, father 解析不了.

@lijinke666
Copy link
Member Author

因依赖拆包, 合并到 #2887 中一起处理

@lijinke666 lijinke666 closed this Sep 24, 2024
@github-actions github-actions bot removed the 🚨 lint failed 静态检查失败 label Sep 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
next 2.0-next 版本的问题
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants