es module bundling with webpack 2 CJ 2017/03/29 F2E&RGBA Meetup 三⽉月號

CJies Tan front end n00b @ iCHEF cjies.com

webpack.js.org

webpack v2 stable released @ Jan 18

migrating to v2 https://webpack.js.org/guides/migrating/

webpack v2 features es6 support tree-shaking dynamic code-splitting build performance improvement https://medium.com/webpack/webpack-2-and-beyond

es6 support no longer transpile import and export statements with babel ["es2015", { "modules": false }]

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

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

tree-shaking demo https://github.com/cjies/tree-shaking-demo

issues to follow up webpack/webpack#2867
 mishoo/UglifyJS2#1261

dynamic code-splitting

dynamic import() • webpack treats import() as a split-point. • puts the request module in a separate chunk. • return a Promise.

https://webpack.js.org/guides/code-splitting-import/

react-async-component https://github.com/ctrlplusb/react-async-component

No content

limitation of import() path // Wrong, no fully dynamic import(Math.random()) // ( Correct, support partially static import('./components/Product') import('./locale' + language + '.json')

$ exit thanks for your listening