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.3k
git flow
cjies
0
330
Other Decks in Technology
See All in Technology
はじめての転職講座/The Guide of First Career Change
kwappa
5
4.5k
kintone開発チームの紹介
cybozuinsideout
PRO
0
73k
信頼できる開発プラットフォームをどう作るか?-Governance as Codeと継続的監視/フィードバックが導くPlatform Engineeringの進め方
yuriemori
1
360
AWSの最新サービスでAIエージェント構築に楽しく入門しよう
minorun365
PRO
10
570
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
110
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
4
430
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.5k
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
170
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
認知戦の理解と、市民としての対抗策
hogehuga
0
230
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
6
580
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
2
1.1k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
How to Ace a Technical Interview
jacobian
279
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Faster Mobile Websites
deanohume
309
31k
The Invisible Side of Design
smashingmag
301
51k
Unsuck your backbone
ammeep
671
58k
How STYLIGHT went responsive
nonsquared
100
5.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
BBQ
matthewcrist
89
9.8k
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