From f28b12fe840aa23fba5fc402002ab39c2b673a62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Lesiecki?= Date: Mon, 14 Mar 2022 16:26:46 +0100 Subject: [PATCH] Apply suggestions from code review Co-authored-by: Kasia Zadurska --- docs/webperf.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/webperf.md b/docs/webperf.md index 8bea6d387..017e11167 100644 --- a/docs/webperf.md +++ b/docs/webperf.md @@ -5,20 +5,20 @@ ## Overview -Important aspect of Turnilo is its web performance. +An important aspect of Turnilo is its web performance. Upon every change to the codebase we should track how performance changes. ## JS bundle size -Bundle size can easily inflate, particularly when app has plenty of dependencies, just like Turnilo. +Bundle size can easily inflate, particularly when an app has plenty of dependencies, just like Turnilo. With every change we should keep track of the bundle size, especially when we add a new dependency. -Before adding new dependency, please consider smaller alternative in terms of bundle size. +Before adding a new dependency, please consider a smaller alternative in terms of bundle size. Tools like [Bundlephobia](https://bundlephobia.com/) will help to recon cost of library and find alternatives. ### Size-limit -[Size-limit Github Action](https://github.com/marketplace/actions/size-limit-action) will help to stay with assets size on the budgets. +[Size-limit Github Action](https://github.com/marketplace/actions/size-limit-action) will help to stay with assets size in the budget. On each pull request this action will post a comment with current bundle size and its delta. **Each time budgets are exceeded CI will fail.** @@ -27,22 +27,22 @@ You can adjust budgets in `size-limit` section of `package.json`. ### Bundle analysis by Statoscope -On every build report about Webpack's bundle is made by [Statoscope](https://statoscope.tech/). +On every build a report about Webpack's bundle is made by [Statoscope](https://statoscope.tech/). You can find these under `build/report-*.html`. Among others it offers detailed tree-map of the client bundle. For example it helps to figure out which dependencies are the heaviest. ### Transpiling dependencies -Usually pre-transpiled dependencies are bad for bundle size, since they can include utilities like babel's helpers or TS' `tslib`. It's a problem because stuff like this is unnecessary for modern browser and hence inside the bundle. -If possible it should be worth to import dependencies from untraspiled source. +Usually pre-transpiled dependencies are bad for bundle size, since they can include utilities like Babel's helpers or TS' `tslib`. It's a problem because stuff like this is unnecessary for modern browsers and hence it should not be included in the bundle. +If possible it should be worth to import dependencies from an untraspiled source. Any dependency that has to be transpiled should be [listed within webpack configuration](../config/webpack.common.js#28). ### Manual (dead) code elimination -Sometimes we can't rely on libraries authors or on webpack in terms of tree-shaking aka dead-code-elimantion and we have to take matters into our own hands. +Sometimes we can't rely on libraries' authors or on Webpack in terms of tree-shaking aka dead-code-elimantion and we have to take matters into our own hands. -Webpack by [`IgnorePlugin`](https://webpack.js.org/plugins/ignore-plugin/) allows to drop selected modules and this [how moment's locales are not included in the final bundle](../config/webpack.common.js#45). +Webpack by [`IgnorePlugin`](https://webpack.js.org/plugins/ignore-plugin/) allows to drop selected modules and this [how Moment's locales are not included in the final bundle](../config/webpack.common.js#45). ## Lighthouse