diff --git a/src/createRollupConfig.ts b/src/createRollupConfig.ts index cd310f5d5..5cb3ab6a3 100644 --- a/src/createRollupConfig.ts +++ b/src/createRollupConfig.ts @@ -194,9 +194,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 index 0ee8339e0..0785badc2 100644 --- 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 index baee6131a..7d077e353 100644 --- 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 index 4e50eeab6..4f157a077 100644 --- 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 new file mode 100644 index 000000000..6021cda3e --- /dev/null +++ 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 index c3d865fa5..0e115bfd2 100644 --- 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 new file mode 100644 index 000000000..6021cda3e --- /dev/null +++ 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 index be3a99082..b4aaa3d18 100644 --- 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: @@ -92,10 +96,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 new file mode 100644 index 000000000..6021cda3e --- /dev/null +++ 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 index cdb1f9d45..1f020dd28 100644 --- 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