Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

CJies Tan front end n00b @ iCHEF cjies.com

Slide 3

Slide 3 text

webpack.js.org

Slide 4

Slide 4 text

webpack v2 stable released @ Jan 18

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

dynamic code-splitting

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

$ exit thanks for your listening