Reducing javascript bundle size

Hey there, 

I'm having a bit of trouble understanding how the javascript packages are working in JumpStart.

I see how the packs are created for the application and administrate (in app/javascript/packs). And can amend these to reduce unused javascript (for example I'm not using trix in the app but I am in the admin).

But when I load my app I see 2 large javascript files (1MB and 2.2MB uncompressed). These seem to be related to vendor node modules. You can see two similar files if you look at the dev tools network tab on jumpstartrails.com.

Does anyone know where these 2 files are coming from - and is it possible to remove them?

I'd like to minimise the javascript shipped as it's causing me slow load times.

Thanks to anyone who can help!

Rob

Think I've found a solution - or at least a stop-gap (skip to the bottom if you just want the solution).

I had a bit more of a dig around, read the webpacker 6 docs, and compared the results to a standard rails app using webpacker 5.2.1 (jumpstart is using webpacker 6.0.0.beta.7).

I'm rebuilding the standard rails app in jumpstart so can compare the two. I'm using the following in the app/javascript/packs/application.js files:

import Rails from "@rails/ujs"
import { Turbo } from "@hotwired/turbo-rails"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

window.Turbo = Turbo

ActiveStorage.start()

import "controllers"

Rails.start()

import "stylesheets/base.scss"
import "stylesheets/components.scss"
import "stylesheets/utilities.scss"

When pushed to production, I was getting (file sizes are the total size, not what was transferred):

The main external package was hotwire, which is a large chunk of the jumpstart app javascript (713KB). But this compiles much smaller in the regular app.

Solution

I'm not sure why, but commenting out the devtool line in config/webpack/base.js seemed to work:

const { webpackConfig, merge } = require('@rails/webpacker')
const customConfig = {
  // Use cheap sourcemap generation
  // devtool: 'eval-cheap-module-source-map',
  plugins: [],
  resolve: {
    extensions: ['.css']
  }
}

module.exports = merge(webpackConfig, customConfig)

After making this change and redeploying the total pack size is 167KB.

If anyone understands why this works I'd be grateful for an explanation!

Cheers