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

Webpack and Code-Splitting for Phoenix

Svilen Gospodinov
September 22, 2016
Programming
0
280

Webpack and Code-Splitting for Phoenix

Lightening talk at ElixirLDN '16.
Code examples: https://gist.github.com/svileng/87bd85b23586fe166342adcb9831874e

Svilen Gospodinov

September 22, 2016
Tweet

Other Decks in Programming

See All in Programming
はじめてのPHPコマンドラインオプション〜PHP開発を今よりちょっと楽しくする〜
kotomin_m
2
100
CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
tonkotsuboy_com
5
6.2k
AWS Lambdaから始める Devチームの小さなDevOps改善 〜QCDどれも諦めない運用を目指して〜 / Start to improving small DevOps with AWS Lambda by Dev Team
cocoeyes02
0
640
「ちょうどよい」フロントエンドアーキテクチャを求めて
ari_mharada
0
160
Compose で Android/iOS アプリを作る
m_coder
0
2.1k
GDSC NYCU 2023 茶會
rabbitmagician1
1
290
_アニメーション抜き__MVIに基づくStateMachineアーキテクチャ_KMPとJetpack_ComposeとSwiftUIを組み合わせる.pdf
gmvalentino8
5
670
Ebitengine, community, and my dream
eihigh
0
120
Rich UI implementation examples using Jetpack Compose (Jetpack Composeを活用した強力なUI表現の実装実例)
iimokoy
0
1.5k
テーブル駆動テストと状態
hazumirr
2
720
EbitengineでGUIツール作ってみた
aethiopicuschan
0
360
Rcloneを使った定期的なストレージ同期
yuhta28
0
150

Featured

See All Featured
Web Components: a chance to create the future
zenorocha
304
41k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
6
7.1k
Why Our Code Smells
bkeepers
PRO
329
56k
Scaling GitHub
holman
455
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
9
3.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
352
21k
GraphQLとの向き合い方2022年版
quramy
25
11k
Fireside Chat
paigeccino
18
2.2k
Building Flexible Design Systems
yeseniaperezcruz
317
36k
The Cost Of JavaScript in 2023
addyosmani
9
1.5k
Rails Girls Zürich Keynote
gr2m
90
12k
Building Better People: How to give real-time feedback that sticks.
wjessup
349
18k

Transcript

  1. WEBPACK
    AND
    CODE-SPLITTING
    ⛏
    for Phoenix

    View Slide

  2. Svilen Gospodinov
    Co-Founder & CTO
    @svileng
    Engineers wanted!
    heresy.io

    View Slide

  3. View Slide

  4. ♥

    View Slide

  5. Brunch Webpack
    • Small, concise config file
    • Easier to use and quicker
    to start with
    • Long and verbose configuration
    • Fine-grain control and highly
    configurable
    TWO POINT COMPARISON

    View Slide

  6. CODE-SPLITTING

    View Slide

  7. webpack --color --display-chunks --display-modules

    View Slide

  8. plugins: [
    new webpack.optimize.CommonsChunkPlugin({
    children: true,
    async: true
    })
    ]

    View Slide

  9. View Slide

  10. View Slide

  11. /login
    /dashboard
    /account

    View Slide

  12. MORE PROFIT
    Chunks do not have ?vsn=d
    which prevents caching!

    View Slide

  13. Thank you!
    @svileng

    View Slide