es module bundling with webpack 2

F2E&RGBA Meetup 三月號

Transcript

1. es module bundling with webpack 2 CJ 2017/03/29 F2E&RGBA Meetup 三⽉月號
2. CJies Tan front end n00b @ iCHEF cjies.com
3. webpack.js.org
4. webpack v2 stable released @ Jan 18
5. migrating to v2 https://webpack.js.org/guides/migrating/
6. webpack v2 features es6 support tree-shaking dynamic code-splitting build performance improvement https://medium.com/webpack/webpack-2-and-beyond
7. es6 support no longer transpile import and export statements with babel ["es2015", { "modules": false }]
8. tree-shaking • popularized by Rich Harris’ module bundler Rollup • “mark” and drop unused exports • won’t work with CommonJS require https://blog.engineyard.com/2016/tree-shaking https://medium.com/@roman01la/dead-code-elimination-and-tree-shaking-in-javascript-build-systems
9. es ready libraries webpack 2 or rollup will resolve module first if es6 supported { // commonJS entry "main": "lib/index.js", // es module entry "module": "es/index.js" } https://gist.github.com/cjies/31b602b53adf22320936663756abd61f
 https://github.com/rollup/rollup/wiki/pkg.module
10. tree-shaking demo https://github.com/cjies/tree-shaking-demo
11. issues to follow up webpack/webpack#2867
 mishoo/UglifyJS2#1261
12. dynamic code-splitting
13. dynamic import() • webpack treats import() as a split-point. • puts the request module in a separate chunk. • return a Promise.
14. https://webpack.js.org/guides/code-splitting-import/
15. react-async-component https://github.com/ctrlplusb/react-async-component
17. limitation of import() path // Wrong, no fully dynamic import(Math.random()) // ( Correct, support partially static import('./components/Product') import('./locale' + language + '.json')
18. $ exit thanks for your listening