ci: add size-limit (#517)

.github/workflows/size-limit.yml

@@ -0,0 +1,24 @@
+name: Size Limit
+on:
+  pull_request:
+    branches:
+      - main
+      - next
+
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run Size Limit
+        run: npm run size

package.json

@@ -8,13 +8,15 @@
   "scripts": {
     "format": "prettier --write \"{src,test}/**/*.{tsx,ts,js}\"",
     "format:check": "prettier --list-different \"{src,test}/**/*.{tsx,ts,js}\"",
+    "dist:pro": "webpack --mode production --progress --config webpack.build.config.js",
     "build": "npm run build:gulp && npm run build:types",
     "build:gulp": "gulp build",
     "build:types": "npx tsc --emitDeclarationOnly --outDir lib && npx tsc --emitDeclarationOnly --outDir es",
     "build:docs": "rm -rf assets &&  NODE_ENV=production webpack",
     "postbuild": "mocha test/build.test.js",
     "dev": "webpack serve --mode development --port 3100 --host 0.0.0.0 --progress",
     "publish:docs": "node docs/gh-pages.js",
+    "size": "npm run dist:pro && size-limit",
     "tdd": "cross-env NODE_ENV=test karma start",
     "lint:ts": "eslint src/**/*.{ts,tsx}",
     "lint": "npm run lint:ts",
@@ -64,6 +66,7 @@
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@faker-js/faker": "^7.6.0",
+    "@size-limit/file": "^11.1.6",
     "@testing-library/react": "^13.4.0",
     "@types/lodash": "^4.14.165",
     "@types/react": "^18.2.0",
@@ -124,6 +127,7 @@
     "rsuite": "^5.69.0",
     "sinon": "^19.0.2",
     "sinon-chai": "^3.7.0",
+    "size-limit": "^11.1.6",
     "style-loader": "^0.13.1",
     "ts-expect": "^1.3.0",
     "typescript": "^5.2.2",
@@ -141,5 +145,12 @@
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
-  }
+  },
+  "size-limit": [
+    {
+      "path": "dist/rsuite-table.min.js",
+      "limit": "50 kB",
+      "gzip": true
+    }
+  ]
 }

webpack.build.config.js

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const webpack = require('webpack');
+
+const __DEV__ = process.env.NODE_ENV === 'development';
+const filename = __DEV__ ? '[name].js' : '[name].min.js';
+
+const plugins = [
+  new webpack.SourceMapDevToolPlugin({
+    filename: `${filename}.map`
+  })
+];
+
+module.exports = {
+  entry: {
+    ['rsuite-table']: path.join(__dirname, 'src')
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename,
+    library: 'rsuite-table',
+    libraryTarget: 'umd'
+  },
+  externals: {
+    react: {
+      root: 'React',
+      commonjs2: 'react',
+      commonjs: 'react',
+      amd: 'react'
+    },
+    'react-dom': {
+      root: 'ReactDOM',
+      commonjs2: 'react-dom',
+      commonjs: 'react-dom',
+      amd: 'react-dom'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts|tsx?$/,
+        use: ['babel-loader?babelrc'],
+        exclude: /node_modules/
+      }
+    ]
+  },
+  plugins,
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js']
+  }
+};