Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use modern syntax in Next client code (e.g. async await) #7014

Merged
merged 4 commits into from
May 1, 2019

Conversation

keanulee
Copy link
Contributor

@keanulee keanulee commented Apr 11, 2019

The idea is to allow Next apps targeting modern browsers only to reduce JS bundle size by removing regenerator/helper code from the transpiled Next client code (e.g. /node_modules/next/dist/{client,pages}. To benefit from this optimization, the app author will need to specify a .babelrc/babel.config.js file that targets modern browsers (e.g. see the additions to test/integration/basic/, which are in this PR for demonstration purposes only). Otherwise, the using the default next/babel preset will still result in the Next client code being transpiled (non-breaking change).

To get a sense of the benefit, here's the difference when applied to the test/integration/basic/ example with the .babelrc/babel.config.js in this PR:

Before (8x.x KB gzip):
image

After (7x.x KB gzip):
image

Note: To make user app code be compatible with the built Next client code, I had to set modules: 'commonjs' in the next/babel preset. From what I understand, this may break tree-shaking in webpack. So probably need to investigate this potential issue further. Fixed by running next client libraries through plugin-transform-modules-commonjs as well in next-babel-loader.js

@github-actions
Copy link
Contributor

Stats from current PR

Click to expand stats
zeit/next.js canary keanulee/next.js async-await-output Change
Build Duration 12.1s 13.4s ⚠️ +1.3s
node_modules Size 44.1 MB 81.8 MB ⚠️ +37.8 MB
Total Bundle (main, webpack, commons) Size 210 kB 207 kB -2.81 kB
Total Bundle (main, webpack, commons) gzip Size 68.5 kB 67.8 kB -750 B
Client _app Size 2.49 kB 2.69 kB ⚠️ +205 B
Client _app gzip Size 1.04 kB 1.14 kB ⚠️ +94 B
Client _error Size 9.64 kB 7.46 kB -2.18 kB
Client _error gzip Size 3.5 kB 2.91 kB -598 B
Client pages/index Size 298 B 357 B ⚠️ +59 B
Client pages/index gzip Size 235 B 269 B ⚠️ +34 B
Client pages/link Size 3.28 kB 3.33 kB ⚠️ +48 B
Client pages/link gzip Size 1.49 kB 1.47 kB -25 B
Client pages/routerDirect Size 426 B 457 B ⚠️ +31 B
Client pages/routerDirect gzip Size 304 B 334 B ⚠️ +30 B
Client pages/withRouter Size 408 B 483 B ⚠️ +75 B
Client pages/withRouter gzip Size 293 B 336 B ⚠️ +43 B
Client main Size 24.4 kB 21.6 kB -2.79 kB
Client main gzip Size 7.89 kB 6.93 kB -961 B
Client commons Size 183 kB 182 kB -281 B
Client commons gzip Size 59.3 kB 59.4 kB ⚠️ +83 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Base Rendered Size 1.34 kB 1.32 kB -23 B
Build Dir Size 348 kB 346 kB -2.2 kB
Click to expand serverless stats
zeit/next.js canary keanulee/next.js async-await-output Change
Build Duration 13.6s 16.2s ⚠️ +2.6s
node_modules Size 44.1 MB 81.8 MB ⚠️ +37.8 MB
Total Bundle (main, webpack, commons) Size 210 kB 207 kB -2.81 kB
Total Bundle (main, webpack, commons) gzip Size 68.5 kB 67.8 kB -750 B
Client _app Size 2.49 kB 2.69 kB ⚠️ +205 B
Client _app gzip Size 1.04 kB 1.14 kB ⚠️ +94 B
Client _error Size 9.64 kB 7.46 kB -2.18 kB
Client _error gzip Size 3.5 kB 2.91 kB -598 B
Client pages/index Size 298 B 357 B ⚠️ +59 B
Client pages/index gzip Size 235 B 269 B ⚠️ +34 B
Client pages/link Size 3.28 kB 3.33 kB ⚠️ +48 B
Client pages/link gzip Size 1.49 kB 1.47 kB -25 B
Client pages/routerDirect Size 426 B 457 B ⚠️ +31 B
Client pages/routerDirect gzip Size 304 B 334 B ⚠️ +30 B
Client pages/withRouter Size 408 B 483 B ⚠️ +75 B
Client pages/withRouter gzip Size 293 B 336 B ⚠️ +43 B
Client main Size 24.4 kB 21.6 kB -2.79 kB
Client main gzip Size 7.89 kB 6.93 kB -961 B
Client commons Size 183 kB 182 kB -281 B
Client commons gzip Size 59.3 kB 59.4 kB ⚠️ +83 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Serverless pages/link Size 336 kB 223 kB -113 kB
Serverless pages/link gzip Size 87 kB 58.7 kB -28.3 kB
Serverless pages/index Size 329 kB 218 kB -111 kB
Serverless pages/index gzip Size 85 kB 57.4 kB -27.6 kB
Serverless pages/_error Size 329 kB 218 kB -112 kB
Serverless pages/_error gzip Size 84.9 kB 57.4 kB -27.5 kB
Serverless pages/routerDirect Size 329 kB 218 kB -111 kB
Serverless pages/routerDirect gzip Size 85.1 kB 57.5 kB -27.6 kB
Serverless pages/withRouter Size 329 kB 218 kB -111 kB
Serverless pages/withRouter gzip Size 85.2 kB 57.5 kB -27.7 kB
Build Dir Size 1.88 MB 1.32 MB -561 kB

@keanulee
Copy link
Contributor Author

Rebased to canary

@github-actions
Copy link
Contributor

Stats from current PR

Click to expand stats
zeit/next.js canary keanulee/next.js async-await-output Change
Build Duration 13.2s 14.2s ⚠️ +1.1s
node_modules Size 43.9 MB 43.8 MB -19.4 kB
Total Bundle (main, webpack, commons) Size 210 kB 208 kB -1.33 kB
Total Bundle (main, webpack, commons) gzip Size 68.5 kB 68.1 kB -450 B
Client _app Size 2.49 kB 2.69 kB ⚠️ +205 B
Client _app gzip Size 1.04 kB 1.14 kB ⚠️ +94 B
Client _error Size 9.64 kB 8.25 kB -1.39 kB
Client _error gzip Size 3.5 kB 3.1 kB -407 B
Client pages/index Size 298 B 357 B ⚠️ +59 B
Client pages/index gzip Size 235 B 269 B ⚠️ +34 B
Client pages/link Size 3.28 kB 3.33 kB ⚠️ +48 B
Client pages/link gzip Size 1.49 kB 1.47 kB -25 B
Client pages/routerDirect Size 426 B 457 B ⚠️ +31 B
Client pages/routerDirect gzip Size 304 B 334 B ⚠️ +30 B
Client pages/withRouter Size 408 B 483 B ⚠️ +75 B
Client pages/withRouter gzip Size 293 B 336 B ⚠️ +43 B
Client main Size 24.4 kB 23.2 kB -1.14 kB
Client main gzip Size 7.89 kB 7.42 kB -467 B
Client commons Size 183 kB 182 kB -455 B
Client commons gzip Size 59.3 kB 59.2 kB -111 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Base Rendered Size 1.34 kB 1.34 kB
Build Dir Size 579 kB 577 kB -2.01 kB
Click to expand serverless stats
zeit/next.js canary keanulee/next.js async-await-output Change
Build Duration 14.6s 15.7s ⚠️ +1.1s
node_modules Size 43.9 MB 43.8 MB -19.4 kB
Total Bundle (main, webpack, commons) Size 210 kB 208 kB -1.33 kB
Total Bundle (main, webpack, commons) gzip Size 68.5 kB 68.1 kB -450 B
Client _app Size 2.49 kB 2.69 kB ⚠️ +205 B
Client _app gzip Size 1.04 kB 1.14 kB ⚠️ +94 B
Client _error Size 9.64 kB 8.25 kB -1.39 kB
Client _error gzip Size 3.5 kB 3.1 kB -407 B
Client pages/index Size 298 B 357 B ⚠️ +59 B
Client pages/index gzip Size 235 B 269 B ⚠️ +34 B
Client pages/link Size 3.28 kB 3.33 kB ⚠️ +48 B
Client pages/link gzip Size 1.49 kB 1.47 kB -25 B
Client pages/routerDirect Size 426 B 457 B ⚠️ +31 B
Client pages/routerDirect gzip Size 304 B 334 B ⚠️ +30 B
Client pages/withRouter Size 408 B 483 B ⚠️ +75 B
Client pages/withRouter gzip Size 293 B 336 B ⚠️ +43 B
Client main Size 24.4 kB 23.2 kB -1.14 kB
Client main gzip Size 7.89 kB 7.42 kB -467 B
Client commons Size 183 kB 182 kB -455 B
Client commons gzip Size 59.3 kB 59.2 kB -111 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Serverless pages/link Size 336 kB 330 kB -5.51 kB
Serverless pages/link gzip Size 87 kB 85.7 kB -1.23 kB
Serverless pages/index Size 329 kB 323 kB -5.42 kB
Serverless pages/index gzip Size 85 kB 83.8 kB -1.25 kB
Serverless pages/_error Size 329 kB 323 kB -6.6 kB
Serverless pages/_error gzip Size 84.9 kB 83.8 kB -1.13 kB
Serverless pages/routerDirect Size 329 kB 323 kB -5.54 kB
Serverless pages/routerDirect gzip Size 85.1 kB 83.8 kB -1.23 kB
Serverless pages/withRouter Size 329 kB 323 kB -5.57 kB
Serverless pages/withRouter gzip Size 85.2 kB 83.9 kB -1.22 kB
Build Dir Size 2.11 MB 2.08 MB -33.8 kB

@github-actions
Copy link
Contributor

Stats from current PR

Click to expand stats
zeit/next.js canary keanulee/next.js async-await-output Change
Build Duration 13s 14.1s ⚠️ +1.1s
node_modules Size 43.9 MB 43.8 MB -18.8 kB
Total Bundle (main, webpack, commons) Size 210 kB 209 kB -990 B
Total Bundle (main, webpack, commons) gzip Size 68.5 kB 68.1 kB -452 B
Client _app Size 2.49 kB 2.69 kB ⚠️ +205 B
Client _app gzip Size 1.04 kB 1.14 kB ⚠️ +92 B
Client _error Size 9.64 kB 8.19 kB -1.45 kB
Client _error gzip Size 3.5 kB 3.09 kB -412 B
Client pages/index Size 298 B 298 B
Client pages/index gzip Size 235 B 235 B
Client pages/link Size 3.28 kB 3.29 kB ⚠️ +8 B
Client pages/link gzip Size 1.49 kB 1.5 kB ⚠️ +4 B
Client pages/routerDirect Size 426 B 426 B
Client pages/routerDirect gzip Size 304 B 304 B
Client pages/withRouter Size 408 B 408 B
Client pages/withRouter gzip Size 293 B 293 B
Client main Size 24.4 kB 23.2 kB -1.14 kB
Client main gzip Size 7.89 kB 7.42 kB -468 B
Client commons Size 183 kB 183 kB -53 B
Client commons gzip Size 59.3 kB 59.3 kB -76 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Base Rendered Size 1.34 kB 1.34 kB
Build Dir Size 579 kB 589 kB ⚠️ +9.9 kB
Click to expand serverless stats
zeit/next.js canary keanulee/next.js async-await-output Change
Build Duration 14.2s 15.6s ⚠️ +1.4s
node_modules Size 43.9 MB 43.8 MB -18.8 kB
Total Bundle (main, webpack, commons) Size 210 kB 209 kB -990 B
Total Bundle (main, webpack, commons) gzip Size 68.5 kB 68.1 kB -452 B
Client _app Size 2.49 kB 2.69 kB ⚠️ +205 B
Client _app gzip Size 1.04 kB 1.14 kB ⚠️ +92 B
Client _error Size 9.64 kB 8.19 kB -1.45 kB
Client _error gzip Size 3.5 kB 3.09 kB -412 B
Client pages/index Size 298 B 298 B
Client pages/index gzip Size 235 B 235 B
Client pages/link Size 3.28 kB 3.29 kB ⚠️ +8 B
Client pages/link gzip Size 1.49 kB 1.5 kB ⚠️ +4 B
Client pages/routerDirect Size 426 B 426 B
Client pages/routerDirect gzip Size 304 B 304 B
Client pages/withRouter Size 408 B 408 B
Client pages/withRouter gzip Size 293 B 293 B
Client main Size 24.4 kB 23.2 kB -1.14 kB
Client main gzip Size 7.89 kB 7.42 kB -468 B
Client commons Size 183 kB 183 kB -53 B
Client commons gzip Size 59.3 kB 59.3 kB -76 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 774 B 774 B
Serverless pages/link Size 336 kB 335 kB -1.23 kB
Serverless pages/link gzip Size 87 kB 86.4 kB -556 B
Serverless pages/index Size 329 kB 327 kB -1.29 kB
Serverless pages/index gzip Size 85 kB 84.5 kB -553 B
Serverless pages/_error Size 329 kB 328 kB -1.29 kB
Serverless pages/_error gzip Size 84.9 kB 84.2 kB -657 B
Serverless pages/routerDirect Size 329 kB 328 kB -1.29 kB
Serverless pages/routerDirect gzip Size 85.1 kB 84.5 kB -550 B
Serverless pages/withRouter Size 329 kB 328 kB -1.29 kB
Serverless pages/withRouter gzip Size 85.2 kB 84.6 kB -567 B
Build Dir Size 2.11 MB 2.1 MB -11.3 kB

@timneutkens timneutkens marked this pull request as ready for review May 1, 2019 16:48
@github-actions
Copy link
Contributor

github-actions bot commented May 1, 2019

Stats from current PR

Click to expand stats
zeit/next.js canary keanulee/next.js async-await-output Change
Build Duration 13.3s 15.3s ⚠️ +2s
node_modules Size 39.6 MB 39.6 MB -10.4 kB
Total Bundle (main, webpack, commons) Size 207 kB 209 kB ⚠️ +2.1 kB
Total Bundle (main, webpack, commons) gzip Size 68.2 kB 68.5 kB ⚠️ +239 B
Client _app Size 2.13 kB 2.6 kB ⚠️ +469 B
Client _app gzip Size 919 B 1.07 kB ⚠️ +150 B
Client _error Size 14.2 kB 8.14 kB -6.07 kB
Client _error gzip Size 5.39 kB 3.1 kB -2.29 kB
Client pages/index Size 288 B 288 B
Client pages/index gzip Size 222 B 222 B
Client pages/link Size 4.59 kB 4.78 kB ⚠️ +193 B
Client pages/link gzip Size 2.01 kB 2.09 kB ⚠️ +80 B
Client pages/routerDirect Size 411 B 411 B
Client pages/routerDirect gzip Size 296 B 296 B
Client pages/withRouter Size 393 B 393 B
Client pages/withRouter gzip Size 280 B 280 B
Client main Size 27.9 kB 23.3 kB -4.68 kB
Client main gzip Size 9.64 kB 7.63 kB -2.01 kB
Client commons Size 177 kB 183 kB ⚠️ +6.31 kB
Client commons gzip Size 57.4 kB 59.5 kB ⚠️ +2.1 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 769 B 769 B
Base Rendered Size 1.34 kB 1.34 kB
Build Dir Size 641 kB 803 kB ⚠️ +162 kB
Click to expand serverless stats
zeit/next.js canary keanulee/next.js async-await-output Change
Build Duration 15.4s 17.1s ⚠️ +1.6s
node_modules Size 39.6 MB 39.6 MB -10.4 kB
Total Bundle (main, webpack, commons) Size 207 kB 209 kB ⚠️ +2.1 kB
Total Bundle (main, webpack, commons) gzip Size 68.2 kB 68.5 kB ⚠️ +239 B
Client _app Size 2.13 kB 2.6 kB ⚠️ +469 B
Client _app gzip Size 919 B 1.07 kB ⚠️ +150 B
Client _error Size 14.2 kB 8.14 kB -6.07 kB
Client _error gzip Size 5.39 kB 3.1 kB -2.29 kB
Client pages/index Size 288 B 288 B
Client pages/index gzip Size 222 B 222 B
Client pages/link Size 4.59 kB 4.78 kB ⚠️ +193 B
Client pages/link gzip Size 2.01 kB 2.09 kB ⚠️ +80 B
Client pages/routerDirect Size 411 B 411 B
Client pages/routerDirect gzip Size 296 B 296 B
Client pages/withRouter Size 393 B 393 B
Client pages/withRouter gzip Size 280 B 280 B
Client main Size 27.9 kB 23.3 kB -4.68 kB
Client main gzip Size 9.64 kB 7.63 kB -2.01 kB
Client commons Size 177 kB 183 kB ⚠️ +6.31 kB
Client commons gzip Size 57.4 kB 59.5 kB ⚠️ +2.1 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 769 B 769 B
Serverless pages/link Size 328 kB 343 kB ⚠️ +14.7 kB
Serverless pages/link gzip Size 87.9 kB 88.8 kB ⚠️ +915 B
Serverless pages/index Size 321 kB 334 kB ⚠️ +12.6 kB
Serverless pages/index gzip Size 85.7 kB 86.4 kB ⚠️ +769 B
Serverless pages/_error Size 322 kB 334 kB ⚠️ +12.6 kB
Serverless pages/_error gzip Size 85.4 kB 86.2 kB ⚠️ +779 B
Serverless pages/routerDirect Size 322 kB 334 kB ⚠️ +12.6 kB
Serverless pages/routerDirect gzip Size 85.7 kB 86.5 kB ⚠️ +752 B
Serverless pages/withRouter Size 322 kB 334 kB ⚠️ +12.6 kB
Serverless pages/withRouter gzip Size 85.8 kB 86.6 kB ⚠️ +762 B
Build Dir Size 2.2 MB 2.37 MB ⚠️ +176 kB

@github-actions
Copy link
Contributor

github-actions bot commented May 1, 2019

Stats from current PR

Click to expand stats
zeit/next.js canary keanulee/next.js async-await-output Change
Build Duration 12.9s 14.4s ⚠️ +1.5s
node_modules Size 39.6 MB 39.6 MB -10.3 kB
Total Bundle (main, webpack, commons) Size 207 kB 209 kB ⚠️ +2.1 kB
Total Bundle (main, webpack, commons) gzip Size 68.2 kB 68.5 kB ⚠️ +237 B
Client _app Size 2.13 kB 2.6 kB ⚠️ +469 B
Client _app gzip Size 919 B 1.07 kB ⚠️ +149 B
Client _error Size 14.2 kB 8.14 kB -6.07 kB
Client _error gzip Size 5.39 kB 3.1 kB -2.3 kB
Client pages/index Size 288 B 288 B
Client pages/index gzip Size 222 B 222 B
Client pages/link Size 4.59 kB 4.78 kB ⚠️ +193 B
Client pages/link gzip Size 2.01 kB 2.09 kB ⚠️ +80 B
Client pages/routerDirect Size 411 B 411 B
Client pages/routerDirect gzip Size 296 B 296 B
Client pages/withRouter Size 393 B 393 B
Client pages/withRouter gzip Size 280 B 280 B
Client main Size 27.9 kB 23.3 kB -4.68 kB
Client main gzip Size 9.64 kB 7.63 kB -2.01 kB
Client commons Size 177 kB 183 kB ⚠️ +6.31 kB
Client commons gzip Size 57.4 kB 59.5 kB ⚠️ +2.1 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 769 B 769 B
Base Rendered Size 1.34 kB 1.34 kB
Build Dir Size 641 kB 803 kB ⚠️ +162 kB
Click to expand serverless stats
zeit/next.js canary keanulee/next.js async-await-output Change
Build Duration 14.7s 16.2s ⚠️ +1.5s
node_modules Size 39.6 MB 39.6 MB -10.3 kB
Total Bundle (main, webpack, commons) Size 207 kB 209 kB ⚠️ +2.1 kB
Total Bundle (main, webpack, commons) gzip Size 68.2 kB 68.5 kB ⚠️ +239 B
Client _app Size 2.13 kB 2.6 kB ⚠️ +469 B
Client _app gzip Size 919 B 1.07 kB ⚠️ +150 B
Client _error Size 14.2 kB 8.14 kB -6.07 kB
Client _error gzip Size 5.39 kB 3.1 kB -2.29 kB
Client pages/index Size 288 B 288 B
Client pages/index gzip Size 222 B 222 B
Client pages/link Size 4.59 kB 4.78 kB ⚠️ +193 B
Client pages/link gzip Size 2.01 kB 2.09 kB ⚠️ +80 B
Client pages/routerDirect Size 411 B 411 B
Client pages/routerDirect gzip Size 296 B 296 B
Client pages/withRouter Size 393 B 393 B
Client pages/withRouter gzip Size 280 B 280 B
Client main Size 27.9 kB 23.3 kB -4.68 kB
Client main gzip Size 9.64 kB 7.63 kB -2.01 kB
Client commons Size 177 kB 183 kB ⚠️ +6.31 kB
Client commons gzip Size 57.4 kB 59.5 kB ⚠️ +2.1 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 769 B 769 B
Serverless pages/link Size 328 kB 343 kB ⚠️ +14.7 kB
Serverless pages/link gzip Size 87.9 kB 88.8 kB ⚠️ +917 B
Serverless pages/index Size 321 kB 334 kB ⚠️ +12.6 kB
Serverless pages/index gzip Size 85.7 kB 86.4 kB ⚠️ +770 B
Serverless pages/_error Size 322 kB 334 kB ⚠️ +12.6 kB
Serverless pages/_error gzip Size 85.4 kB 86.2 kB ⚠️ +780 B
Serverless pages/routerDirect Size 322 kB 334 kB ⚠️ +12.6 kB
Serverless pages/routerDirect gzip Size 85.7 kB 86.5 kB ⚠️ +753 B
Serverless pages/withRouter Size 322 kB 334 kB ⚠️ +12.6 kB
Serverless pages/withRouter gzip Size 85.8 kB 86.6 kB ⚠️ +761 B
Build Dir Size 2.2 MB 2.37 MB ⚠️ +176 kB

@timneutkens timneutkens changed the title [proposal] Use modern syntax in Next client code (e.g. async await) Use modern syntax in Next client code (e.g. async await) May 1, 2019
@timneutkens timneutkens merged commit d120f14 into vercel:canary May 1, 2019
@timneutkens
Copy link
Member

🚀 Thank you @keanulee

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants