Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
es module bundling with webpack 2
Search
cjies
March 29, 2017
Technology
1
560
es module bundling with webpack 2
F2E&RGBA Meetup 三月號
cjies
March 29, 2017
Tweet
Share
More Decks by cjies
See All by cjies
git, let it flow!
cjies
9
2.2k
git flow
cjies
0
320
Other Decks in Technology
See All in Technology
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
910
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
300
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
1
280
How Community Opened Global Doors
hiroramos4
PRO
1
130
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
3k
Model Mondays S2E03: SLMs & Reasoning
nitya
0
220
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
460
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
150
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.2k
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
1
560
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
220
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
670
Code Review Best Practice
trishagee
69
18k
Optimizing for Happiness
mojombo
379
70k
How STYLIGHT went responsive
nonsquared
100
5.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
Building Flexible Design Systems
yeseniaperezcruz
328
39k
RailsConf 2023
tenderlove
30
1.1k
The Language of Interfaces
destraynor
158
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
BBQ
matthewcrist
89
9.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
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
None
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