npm

How to build npm

Transcript

1. Как правильно собирать -пакеты в 2к19 году Красновский Денис ДомКлик
2. 2 Красновский Денис Технический руководитель разработки ДомКлик speakerdeck.com/denredsky/npm telegram: @jquery_dlya_slabih
3. 3 Why it’s important? 194.6kB Another one super cool something for React/Angular/Vue
5. 5 developers.google.com/web/tools/lighthouse
6. 6 Performance is about retaining users improving conversions the user experience people seo hard skills developers.google.com/web/fundamentals/performance/why- performance-matters/
7. 7 «…отсекаю всё лишнее» ― Микеланджело Буонарроти
8. 8 CommonJS AMD UMD ES-modules JS MODULE SYSTEM package.json
9. 9 OR
10. 10 Webpack Initial commit 10 Mar 2012 ~ 3,498,984 repositories on GitHub Can do all, but ES-modules For example let’s build simple UI-lib
11. 11 Import BAD webpack.prod.js
12. 12 Import GOOD webpack.prod.js
13. 13 Library target webpack.prod.js
14. 14 Dependencies dependencies devDependencies peerDependencies
15. 15 Externals package.json webpack.prod.js WEBPACK-NODE-EXTERNALS OR
16. 16 Gotcha!
17. 17 How to reduce JS via Webpack config I am super super serious webpack.prod.js
18. 18 ⚠ DANGER ⚠ webpack.js.org/configuration/optimization/#optimizationminimizer webpack.prod.js
19. 19 .browserslistrc Useful for autoprefixer and @babel/preset-env
20. 20 How to reduce CSS via Webpack mini-css-extract-plugin optimize-css-assets-webpack-plugin
21. 21 Transpile JS via Babel 2ality.com/2015/12/babel6-loose-mode.html babel.config.js
22. 22 npm publish package.json
23. 23 Rollup Initial commit 17 May 2015 ~ 221,206 repositories on GitHub Can build ES-modules For example let’s build simple utils-lib
24. 24 That’s all rollup.config.js
25. 25 ES6 syntax import/export preserveModules: true sideEffects: false Conditions for tree-shaking
26. 26 Win
28. 28 Import cost Display import package size in the editor
29. 29 bundlephobia.com
30. 30 bundlephobia.com
31. 31 Finally duplicate-package-checker-webpack-plugin or inspectpack check bundles weight after build
32. 32 Dynamic import webpack.js.org/guides/code-splitting/
33. 33 Typical situation
34. 34 Blockchain NPM-chain
35. 35 Step 1: we need a shared npm-package for …
36. 36 Step 2: npm-package so cool let’s create more npm
37. 37 Step 3: this was bad idea
38. speakerdeck.com/denredsky/npm Спасибо за внимание, вопросы? telegram: @jquery_dlya_slabih