webpack managed assets

Nikola Đuza

Semaphore ❤️ Rails Semaphore ❤️ JavaScript

language.history(📚)

• Ruby -1995
• JavaScript -1995
• Rails - 2004
• React - 2013

language.history(Rails, JS)

• Unobtrusive JavaScript - Rails 3.0
• Asset Pipeline - Rails 3.1
• Webpack/React/Angular/Vue.js out of the box - Rails 5.1

Unobtrusive JS

<%= link_to "an article", @article, remote: true %>

<a href="/articles/1" data-remote="true">an article</a>

$ ->
  $("a[data-remote]").on "ajax:success", (e, data, status, xhr) ->
    alert "The article was deleted."

Asset pipeline

The first feature of the pipeline is to concatenate assets, which can reduce the number of requests that a browser makes to render a web page.

Asset pipeline

The second feature of the asset pipeline is asset minification or compression.

Asset pipeline

The third feature of the asset pipeline is it allows coding assets via a higher-level language, with precompilation down to the actual assets.

I: I want to use lodash.

AP: It's easy, use rails-assets or just include the file in the pipeline by hand.

I: Awesome, thanks 🍺.

gem "rails-assets-lodash", "~> 2.4.1"

I: Hey, I want to use enzyme to test React.

AP: OK, did you try rails-assets?

I: Yeah, it's not on there 😔.

AP: And did you try including the file in the pipeline?

I: Yep, but it's too big, and they don't serve minfied version 😢.

AP: ¯\_(ツ)_/¯

node package manager

• released in 2010.
• package.json

browserify-rails 💎

• simple to use
• supports modules
• works with Asset Pipeline

problem with browserify-rails

• slow asset compilation on CI/CD
• slow asset compilation in development
• slow asset compilation in tests

webpacker 💎

• latest and gratest
• yarn
• React support

browserify-rails vs webpacker

Asset compilation went from 11 minutes to 1 minute.

browserify-rails vs webpacker

Cucumber scenarios went from ~5 minutes to ~2 minutes.

browserify-rails vs webpacker

Minified application.js went from ~8 MB to ~4.5 MB