Skip to content

Маленькое изменения для Review и огромное для Альфа - Банка 😅#126

Open
Luchanso wants to merge 1 commit intomasterfrom
feature/polyfills-experiment
Open

Маленькое изменения для Review и огромное для Альфа - Банка 😅#126
Luchanso wants to merge 1 commit intomasterfrom
feature/polyfills-experiment

Conversation

@Luchanso
Copy link
Contributor

Оказывается у бабеля есть классная опция, о которой все мечтают - он умеет искать штуки, которые нужно заполифилить, например для IE: https://babeljs.io/docs/en/usage#polyfill

В результате будут добавлены нужные полифилы из core-js, но нужно проверить, как поменяется размер бандла и не будут ли задвоения полифилов (когда они два раза подключаются и размер бандла сильно растёт)

Вот что конкретно делает эта опция:

[1, 2, 3].includes('blabla');

to

"use strict";

require("core-js/modules/es.array.includes");

[1, 2, 3].includes('blabla');

Поиграть можно тут

@aweppc
Copy link
Contributor

aweppc commented Aug 5, 2020

но нужно проверить, как поменяется размер бандла

ага

@voronin-ivan
Copy link
Contributor

но нужно проверить, как поменяется размер бандла и не будут ли задвоения полифилов (когда они два раза подключаются и размер бандла сильно растёт)

Так может сначала проверить, прежде чем мержить?)

@Luchanso
Copy link
Contributor Author

Luchanso commented Aug 5, 2020

но нужно проверить, как поменяется размер бандла и не будут ли задвоения полифилов (когда они два раза подключаются и размер бандла сильно растёт)

Так может сначала проверить, прежде чем мержить?)

Так и планирую сделать на нашем проекте

@Luchanso
Copy link
Contributor Author

@Heymdall, @aweppc есть особенность:
Нужно будет в каждом проекте установить именно core-js@2.6.5, так как в core-js@3 есть баг. core-js должен стоять в зависимостях конечного проекта к сожалению

Полифилы не задваиваются (видимо tree shaking отрабатывает)
С новыми изменениями:

Server compiled successfully.

Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
Client compiled with warnings.

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  vendor.d6513822.chunk.css (268 KiB)
  vendor.bb108388.chunk.js (671 KiB)

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (1.08 MiB)
      vendor.d6513822.chunk.css
      vendor.bb108388.chunk.js
      main.77fb50dc.css
      main.b01601d6.js
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
Assets sizes:
  17.53 KB (4.84 KB gzip, 4.26 KB br)  main.css
  153.87 KB (30.98 KB gzip, 25.94 KB br)  main.js
  670.91 KB (184.25 KB gzip, 138.48 KB br)  vendor.js
  267.93 KB (49.22 KB gzip, 39.29 KB br)  vendor.css
  61.17 KB (11.05 KB gzip, 9.64 KB br)  vendors~app-header.css
  74 KB (15.74 KB gzip, 13.66 KB br)  vendors~app-header.js

Total size:
  1.22 MB (296.08 KB gzip, 231.26 KB br)

✨  Done in 31.56s.

Без изменений, также на проекте не было вообще каких либо полифилов:

Server compiled successfully.

Client compiled with warnings.

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  vendor.d6513822.chunk.css (268 KiB)
  vendor.d3f5bbe0.chunk.js (643 KiB)

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (1.06 MiB)
      vendor.d6513822.chunk.css
      vendor.d3f5bbe0.chunk.js
      main.77fb50dc.css
      main.5ceff84d.js
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
Assets sizes:
  152.92 KB (30.69 KB gzip, 25.73 KB br)  main.js
  17.53 KB (4.84 KB gzip, 4.26 KB br)  main.css
  643.5 KB (173.64 KB gzip, 134.01 KB br)  vendor.js
  267.93 KB (49.22 KB gzip, 39.29 KB br)  vendor.css
  61.17 KB (11.05 KB gzip, 9.64 KB br)  vendors~app-header.css
  74 KB (15.74 KB gzip, 13.66 KB br)  vendors~app-header.js

Total size:
  1.19 MB (285.18 KB gzip, 226.59 KB br)

✨  Done in 24.90s.

Разница по времени в сторону увеличения 5 секунд для не большого проекта
Разница по размеру в сторону увеличения 10.9 KB gzip

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.

7 participants