The document discusses optimizing a frontend build process. It recommends using Webpack or Rollup as the module bundler and decomposing the build into separate steps like compiling assets, JavaScript, and styles. It also suggests using tools like Babel, TypeScript, and PostCSS loaders to optimize builds and provides examples of build processes for frameworks like Angular and React. Optimization techniques mentioned include using HappyPack, thread-loader, and hard-source-webpack-plugin to parallelize and cache work to speed up builds.

1. Andrew Mykhailiuk
Works in @Snap Inc.
Twitter: @andreyctkn
Github: @andreyutka

2. Извините, мне нужно собрать фронтенд

3. Why?

4. - create the build process
- support it!
- new ways?

5. three states of questions
from your manager
about frontend build process

6. first state

7. second state

8. third state

9. So how we can be at the first state?

10. Agenda:
- Webpack aka loaders lifestyle
- Rollup with plugins
- CLI
- Try to decompose your build
- build process as a tool

11. Build process:
- copy assets
- compile from X-JS to ES5
- make bundle
- compile styles
- minifying
- style guide
- testing

12. tl;dr testing

13. tl;dr style guide

14. Webpack 1.X

15. x-tool
x-tool-loader or x-tool-awesome-loader
x-tool-plugin or ...
webpack

16. babel-loader
readme: Troubleshooting
- babel-loader is slow!
- babel is injecting helpers into each file and bloating my code!

17. ts-loader
readme: Faster Builds
- You probably don't want to give up type checking; that's rather the point of
TypeScript. So what you can do is use the fork-ts-checker-webpack-plugin
- If you'd like to make things even faster still (I know, right?) then you might want to
consider using ts-loader with happypack which speeds builds by parallelising work.

18. awesome-typescript-loader
readme: Performance issues
The world is changing, other solutions are evolving and ATL may
work slower for some workloads. Feel free to try ts-loader with
HappyPack or thread-loader and hard-source-webpack-plugin.

19. https://github.com/TypeStrong/ts-loader/issues/181

20. webpack:
- copy assets
- compile from X-JS to ES5
- make bundle
- compile styles
- minifying

21. rollup: 0.62.0
rollup-plugin-commonjs
rollup-plugin-node-resolve
rollup-plugin-replace

22. rollup:
- copy assets
- compile from X-JS to ES5
- make bundle
- compile styles
- minifying

23. CLI

24. angular cli - webpack..
ember cli - broccoli...
react create app - webpack..

25. let me decompose your build

26. - use your compiler as compiler
- use your module bundler as module bundler

27. Assets?

28. Styles?

29. CSS in JS better for build process
but not for project

32. build process as a tool

34. Stencil is a compiler that generates Web Components (more
specifically, Custom Elements).
Stencil takes features such as:
- Virtual DOM
- Async rendering (inspired by React Fiber)
- Reactive data-binding
- TypeScript
- JSX

36. Using Stencil Built Web Components
with other frameworks!
https://stenciljs.com/docs/framework-integration

37. And…
- try to simplify your build as possible
- use the tools to their maximum extent
- try to avoid third party tools as possible
- take a look at build tools as a tool/compiler, as like
as stencil

38. Maybe it's the end

39. but

40. rollup: 0.62.0
vs
webpack 4.15.1

41. ~250 modules

42. webpack rollup
time 3.68s 3.85s
size 238 kb 232 kb