How can I have code splitting?

[flivni]

I'm a javascript neophyte, so sorry in advance if I'm misunderstanding something fundamental.

My question

I import various packages in my javascript. Is there a way to code split these and load as chunks?

Some details and thoughts

I'm using Rails 6 with jsbundling-rails and webpack. Per jsbundling-rails default setup, I have webpack compiling my javascript into /assets/build which is then picked up and compiled via sprockets.

(Note: If there is a Rails 7 only answer, I'd be very interested to hear that as well.)

Sprockets adds a fingerprint/hash to the filenames of all compiled assets. I believe that if I set up code-splitting in webpack, then webpack doesn't know about the new filenames and so doesn't know which file to load. And my guess is that is why the default webpack setup looks like this:

  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })]

If my thinking so far is correct and also if code splitting is not support by jsbundling-rails/sprockets, then what would be the best workaround?

My initial thought re workaround, is to bypass sprockets and compile into /public, configuring webpack to add a hash to the filename rather than sprockets. Then I could hook assets::precompile to modify the name of the application.js link I have in my layout to include the fingerprint set by webpack.

Thanks for the help.

[justin808]

@flivni Check out https://github.com/shakacode/shakapacker. It's the supported fork and evolution of rails/webpacker which does what you want by default.

[brenogazzola]

Just need to adjust Webpack's configuration file. Remove the LimitChunkCountPlugin and add the chunkFilename attribute to tell it to predigest the chunks and add .digested. This last keyword will indicate Sprockets that it should not add another digest to the file when running precompile.

const path    = require("path")
const webpack = require("webpack")

module.exports = {
  mode: "production",
  devtool: "source-map",
  entry: {
    application: "./app/javascript/application.js"
  },
  output: {
    filename: "[name].js",
    chunkFilename: '[name]-[contenthash].digested.js',
    sourceMapFilename: "[name].js.map",
    path: path.resolve(__dirname, "app/assets/builds"),
  }
}

[justin808]

@brenogazzola awesome! We should get this in the docs. However, if you wanted to enable HMR and have code-splitting, that would probably be beyond jsbundling-rails, correct?