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

Webpack and Code-Splitting for Phoenix

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

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