Upgrade to Pro — share decks privately, control downloads, hide ads and more …

es module bundling with webpack 2

cjies
March 29, 2017

es module bundling with webpack 2

F2E&RGBA Meetup 三月號

cjies

March 29, 2017
Tweet

More Decks by cjies

Other Decks in Technology

Transcript

  1. webpack v2 features es6 support tree-shaking dynamic code-splitting build performance

    improvement https://medium.com/webpack/webpack-2-and-beyond
  2. 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
  3. 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
  4. dynamic import() • webpack treats import() as a split-point. •

    puts the request module in a separate chunk. • return a Promise.
  5. limitation of import() path // Wrong, no fully dynamic import(Math.random())

    // ( Correct, support partially static import('./components/Product') import('./locale' + language + '.json')