Code Spliting

[cgarvis]

Webpack 2 documentation on this topic has not been written as of this writing, but it hasn't changed from Webpack 1 to much.

var webpack = require("webpack");

module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["jquery", "underscore", ...],
  },
  output: {
    filename: "bundle.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
  ]
}

Source: https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code

[merqlove]

Here is no significant difference from Wp 1.x. It is really depends on application.
For example in current app I'm use tiny pack for preloader & large pack for whole app. But application uses spin.js, nprogress, ... from the preloader.

In similar way:

new webpack.optimize.CommonsChunkPlugin({
  name: "preload",
  filename: "preload.js",
  async: true
})

[gauravtiwari]

@cgarvis The gem already provides code chunking out-of-the-box. As far as vendor chunking, I guess this is project specific requirement and could be added by the lines of code you shared.

[estepnv]

@gauravtiwari could you please share a line of code where code splitting is configured? cause I can't find it

[xdmx]

Is this a viable solution to avoid importing for example React in each javascript pack?

If I have 10 different packs, and each one import React from 'react' and import { render } from 'react-dom' the user's browser would have to download the same code multiple times but in different files.

Is there a way to globally import react and react-dom in a single file (vendor, bundle, preload) and then using it from packs without having to import them each time?

[gauravtiwari]

Sure you can do this using common chunk plugin - https://webpack.js.org/plugins/commons-chunk-plugin/ and use it in your view using javascript_pack_tag helper - https://webpack.js.org/plugins/commons-chunk-plugin/

[tarr11]

It wasn't too clear to me how to do this. What I did was created a CommonsChunkPlugin per @gauravtiwari

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      minChunks: Infinity,
    }) 
  ]

But then I also created a separate pack called common.js in app/javascript/packs/common.js which lets you reference the javascript_pack_tag

In this pack, I simply just imported the libraries that should show up in common:

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';

Then, in my rails code (HAML), include the common pack first

= javascript_pack_tag "common"
= javascript_pack_tag "application"

[bessey]

This is one way to do it @tarr11 but you might be better off letting webpack do its smarts. By using Infinity you force yourself to pick out the common libraries yourself, (and to create a common.js file), if you set minChunks to a number N, webpack will instead extract the dependency into common.js when it finds N other packs importing the same thing.

Of course, that does mean to be safe you need to use = javascript_pack_tag "common" everywhere you have a pack, even if it doesn't have React in it.

[yvbeek]

In my case the assets are served by Nginx over HTTP2. I don't think it would be that useful to combine all vendor scripts into one big file. It would probably be better to keep the scripts separated by vendor (e.g. one for jQuery, one for Bootstrap, one for Dropzone etc.), and let the browser download them efficiently.

I'm still trying to figure out how to properly configure this.

The updated code splitting documentation is available at:
https://webpack.js.org/guides/code-splitting/