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
550
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
310
Other Decks in Technology
See All in Technology
Terraform Stacks入門 #HashiTalks
msato
0
370
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
120
強いチームと開発生産性
onk
PRO
36
12k
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
4
210
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
730
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
640
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
SDN の Hype Cycle を一通り経験してみて思うこと / Going through the Hype Cycle of SDN
mshindo
2
230
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
180
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
3
360
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
7
720
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Why Our Code Smells
bkeepers
PRO
334
57k
GitHub's CSS Performance
jonrohan
1030
460k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
What's in a price? How to price your products and services
michaelherold
243
12k
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