chore: add bundle size metrics (#3999)

* chore: add bundle size metrics

* fix script

* fix script, add config & plugin

* update config, cleanup modules

* fix deps

Author: layershifter

.github/workflows/size-limit.yml

@@ -0,0 +1,35 @@
+name: Bundle Size
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+
+      - name: Cache node_modules
+        uses: actions/cache@v1
+        id: yarn-cache-node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-yarn-cache-node-modules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-cache-node-modules-
+
+      - name: Yarn install
+        if: steps.yarn-cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+
+      - uses: andresz1/size-limit-action@v1.4.0
+        with:
+          build_script: build:size
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.size-limit.js

@@ -0,0 +1,5 @@
+module.exports = require('glob')
+  .sync('bundle-size/dist/*.size.js', {
+    cwd: __dirname,
+  })
+  .map((file) => ({ path: file, gzip: false }))

bundle-size/bundle.js

@@ -0,0 +1,135 @@
+const c = require('ansi-colors')
+const glob = require('glob')
+const path = require('path')
+const terserVersion = require('terser/package.json').version
+const TerserWebpackPlugin = require('terser-webpack-plugin')
+const webpack = require('webpack')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const { argv } = require('yargs')
+
+const config = require('../config')
+
+// Ensures that production settings for Babel are used
+process.env.NODE_ENV = 'build-es'
+
+/* eslint-disable no-await-in-loop */
+/* eslint-disable no-console */
+/* eslint-disable no-restricted-syntax */
+
+//
+// Webpack config
+//
+
+const makeWebpackConfig = (entry) => ({
+  devtool: false,
+  mode: 'production',
+  name: 'client',
+  target: 'web',
+
+  entry,
+  output: {
+    filename: path.basename(entry),
+    path: config.paths.base('bundle-size', 'dist'),
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.(js|ts)$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        options: {
+          cacheDirectory: true,
+        },
+      },
+    ],
+  },
+  externals: {
+    react: 'react',
+    'react-dom': 'reactDOM',
+  },
+
+  ...(argv.debug && {
+    optimization: {
+      minimizer: [
+        new TerserWebpackPlugin({
+          cache: true,
+          parallel: true,
+          sourceMap: false,
+
+          terserOptions: {
+            mangle: false,
+            output: {
+              beautify: true,
+              comments: true,
+              preserve_annotations: true,
+            },
+          },
+        }),
+      ],
+    },
+  }),
+
+  performance: {
+    hints: false,
+  },
+  plugins: [
+    argv.debug &&
+      new BundleAnalyzerPlugin({
+        analyzerMode: 'static',
+        logLevel: 'warn',
+        openAnalyzer: false,
+        reportFilename: `${path.basename(entry, '.js')}.html`,
+      }),
+  ].filter(Boolean),
+  resolve: {
+    alias: {
+      'semantic-ui-react': config.paths.dist('es', 'index.js'),
+    },
+  },
+})
+
+function webpackAsync(webpackConfig) {
+  return new Promise((resolve, reject) => {
+    const compiler = webpack(webpackConfig)
+
+    compiler.run((err, stats) => {
+      if (err) {
+        reject(err)
+      }
+
+      const info = stats.toJson()
+
+      if (stats.hasErrors()) {
+        reject(new Error(info.errors.toString()))
+      }
+      if (stats.hasWarnings()) {
+        reject(new Error(info.warnings.toString()))
+      }
+
+      resolve(info)
+    })
+  })
+}
+
+//
+//
+//
+
+;(async () => {
+  const fixtures = glob.sync('fixtures/*.size.js', {
+    cwd: __dirname,
+  })
+
+  console.log(c.cyan(`ℹ Using Webpack ${webpack.version} & Terser ${terserVersion}`))
+
+  console.log(c.cyan('ℹ Running following fixtures:'))
+  console.log(c.cyan(fixtures.map((fixture) => `  - ${fixture}`).join('\n')))
+
+  for (const fixture of fixtures) {
+    const fixturePath = config.paths.base('bundle-size', fixture)
+
+    await webpackAsync(makeWebpackConfig(fixturePath))
+    console.log(c.green(`✔ Completed: ${fixture}`))
+  }
+})()

bundle-size/fixtures/Button.size.js

@@ -0,0 +1,9 @@
+import { Button } from 'semantic-ui-react'
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+function App() {
+  return <Button>A sample button</Button>
+}
+
+ReactDOM.render(<App />, document.querySelector('#root'))

bundle-size/fixtures/Icon.size.js

@@ -0,0 +1,9 @@
+import { Icon } from 'semantic-ui-react'
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+function App() {
+  return <Icon name='book' />
+}
+
+ReactDOM.render(<App />, document.querySelector('#root'))

bundle-size/fixtures/Image.size.js

@@ -0,0 +1,9 @@
+import { Image } from 'semantic-ui-react'
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+function App() {
+  return <Image src='image.jpg' />
+}
+
+ReactDOM.render(<App />, document.querySelector('#root'))

bundle-size/fixtures/Portal.size.js

@@ -0,0 +1,9 @@
+import { Portal } from 'semantic-ui-react'
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+function App() {
+  return <Portal trigger={<button />}>Some content</Portal>
+}
+
+ReactDOM.render(<App />, document.querySelector('#root'))

package.json

@@ -18,7 +18,9 @@
     "build:changelog": "github_changelog_generator --user Semantic-Org --project Semantic-UI-React --no-issues --no-unreleased --release-branch master --since-tag $(git describe --abbrev=0 --tags $(git rev-parse HEAD~250))",
     "build:docs": "cross-env NODE_ENV=production gulp build:docs",
     "build:docs:staging": "cross-env STAGING=true yarn build:docs && yarn serve docs/dist",
-    "build:dist": "gulp --series build:dist",
+    "build:dist": "gulp build:dist",
+    "prebuild:size": "gulp build:dist:es",
+    "build:size": "node bundle-size/bundle.js",
     "ci": "yarn tsd:lint && yarn tsd:test && yarn lint && yarn test",
     "predeploy:docs": "cross-env NODE_ENV=production yarn build:docs && gulp build:docs:cname",
     "deploy:changelog": "git add CHANGELOG.md && git commit -m \"docs(changelog): update changelog [ci skip]\" && git push",
@@ -103,6 +105,7 @@
     "@babel/register": "^7.4.4",
     "@babel/standalone": "^7.4.5",
     "@mdx-js/loader": "^0.20.3",
+    "@size-limit/file": "^4.5.5",
     "@stardust-ui/docs-components": "^0.34.1",
     "@types/react": "^16.8.25",
     "anchor-js": "^4.2.0",
@@ -171,14 +174,17 @@
     "simulant": "^0.2.2",
     "sinon": "^7.2.7",
     "sinon-chai": "^3.3.0",
+    "size-limit": "^4.5.5",
     "ta-scripts": "^2.5.2",
+    "terser-webpack-plugin": "^3.0.7",
     "terser-webpack-plugin-legacy": "^1.2.3",
     "through2": "^3.0.1",
     "tslint": "^5.14.0",
     "tslint-config-airbnb": "^5.11.1",
     "typescript": "^3.3.3333",
     "vinyl": "^2.2.0",
     "webpack": "^4.28.4",
+    "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.2.1",
     "webpack-dev-middleware": "^3.5.0"
   },