feat: add size-limit bundle size analysis tool to templates (jaredpal…

…mer#705) - Add size-limit and size-limit-action to all templates - Use `@size-limit/preset-small-lib` by default - Add `yarn size` and `yarn visualize` scripts - Remove outdated references to rollup-plugin-size-snapshot Co-authored-by: Anton Gilgur <[email protected]>
EezyQuote · Dec 1, 2020 · bac0716 · bac0716
1 parent 6851815
commit bac0716
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 14 deletions.
diff --git a/src/createRollupConfig.ts b/src/createRollupConfig.ts
@@ -197,9 +197,6 @@ export async function createRollupConfig(
           'process.env.NODE_ENV': JSON.stringify(opts.env),
         }),
       sourceMaps(),
-      // sizeSnapshot({
-      //   printInfo: false,
-      // }),
       shouldMinify &&
         terser({
           sourcemap: true,

diff --git a/src/env.d.ts b/src/env.d.ts
@@ -12,7 +12,6 @@ declare module '@babel/core' {
 
 // Rollup plugins
 declare module 'rollup-plugin-babel';
-declare module 'rollup-plugin-size-snapshot';
 declare module 'rollup-plugin-terser';
 declare module 'babel-traverse';
 declare module 'babylon';

diff --git a/src/templates/basic.ts b/src/templates/basic.ts
@@ -2,7 +2,14 @@ import { Template } from './template';
 
 const basicTemplate: Template = {
   name: 'basic',
-  dependencies: ['husky', 'tsdx', 'tslib', 'typescript'],
+  dependencies: [
+    'husky',
+    'tsdx',
+    'tslib',
+    'typescript',
+    'size-limit',
+    '@size-limit/preset-small-lib',
+  ],
   packageJson: {
     // name: safeName,
     version: '0.1.0',
@@ -21,8 +28,22 @@ const basicTemplate: Template = {
       test: 'tsdx test',
       lint: 'tsdx lint',
       prepare: 'tsdx build',
+      size: 'size-limit',
+      analyze: 'size-limit --why',
     },
     peerDependencies: {},
+    /*
+    'size-limit': [
+      {
+        path: `dist/${safeName}.cjs.production.min.js`,
+        limit: '10 KB',
+      },
+      {
+        path: `dist/${safeName}.esm.js`,
+        limit: '10 KB',
+      },
+    ],
+    */
     husky: {
       hooks: {
         'pre-commit': 'tsdx lint',

diff --git a/src/templates/utils/index.ts b/src/templates/utils/index.ts
@@ -13,5 +13,15 @@ export const composePackageJson = (template: Template) => ({
     name,
     author,
     module: `dist/${name}.esm.js`,
+    'size-limit': [
+      {
+        path: `dist/${name}.cjs.production.min.js`,
+        limit: '10 KB',
+      },
+      {
+        path: `dist/${name}.esm.js`,
+        limit: '10 KB',
+      },
+    ],
   };
 };
diff --git a/templates/basic/.github/workflows/size.yml b/templates/basic/.github/workflows/size.yml
@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/templates/basic/README.md b/templates/basic/README.md
@@ -30,6 +30,10 @@ Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adju
 
 Jest tests are set up to run with `npm test` or `yarn test`.
 
+### Bundle Analysis
+
+[`size-limit`](https://github.com/ai/size-limit) is set up to calculate the real cost of your library with `npm run size` and visualize the bundle with `npm run analyze`.
+
 #### Setup Files
 
 This is the folder structure we set up for you:
@@ -57,10 +61,10 @@ TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rol
 
 ### GitHub Actions
 
-A simple action is included that runs these steps on all pushes:
+Two actions are added by default:
 
-- Installs deps w/ cache
-- Lints, tests, and builds
+- `main` which installs deps w/ cache, lints, tests, and builds on all pushes
+- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
 
 ## Optimizations
 

diff --git a/templates/react-with-storybook/.github/workflows/size.yml b/templates/react-with-storybook/.github/workflows/size.yml
@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/templates/react-with-storybook/README.md b/templates/react-with-storybook/README.md
@@ -56,6 +56,10 @@ Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adju
 
 Jest tests are set up to run with `npm test` or `yarn test`.
 
+### Bundle analysis
+
+Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
+
 #### Setup Files
 
 This is the folder structure we set up for you:
@@ -97,10 +101,10 @@ TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rol
 
 ### GitHub Actions
 
-A simple action is included that runs these steps on all pushes:
+Two actions are added by default:
 
-- Installs deps w/ cache
-- Lints, tests, and builds
+- `main` which runs installs deps w/ cache, lints, tests, and builds on all pushes
+- `size` which comments cost comparison of your library on every pull request using [size-limit](https://github.com/ai/size-limit)
 
 ## Optimizations
 

diff --git a/templates/react/.github/workflows/size.yml b/templates/react/.github/workflows/size.yml
@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/templates/react/README.md b/templates/react/README.md
@@ -40,6 +40,10 @@ Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adju
 
 Jest tests are set up to run with `npm test` or `yarn test`.
 
+### Bundle analysis
+
+Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
+
 #### Setup Files
 
 This is the folder structure we set up for you:
@@ -76,10 +80,10 @@ TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rol
 
 ### GitHub Actions
 
-A simple action is included that runs these steps on all pushes:
+Two actions are added by default:
 
-- Installs deps w/ cache
-- Lints, tests, and builds
+- `main` which runs installs deps w/ cache, lints, tests, and builds on all pushes
+- `size` which comments cost comparison of your library on every pull request using
 
 ## Optimizations