Skip to content

Code Spliting #65

Closed
Closed
@cgarvis

Description

@cgarvis
Contributor

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

Activity

merqlove

merqlove commented on Jan 19, 2017

@merqlove
Contributor

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

gauravtiwari commented on Mar 23, 2017

@gauravtiwari
Member

@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

estepnv commented on Apr 4, 2017

@estepnv

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

xdmx

xdmx commented on Apr 11, 2017

@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

gauravtiwari commented on Apr 11, 2017

@gauravtiwari
Member

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

tarr11 commented on Apr 20, 2017

@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

bessey commented on Apr 28, 2017

@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

yvbeek commented on Feb 12, 2018

@yvbeek
Contributor

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/

added a commit that references this issue on Mar 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @merqlove@rafaelfranca@xdmx@cgarvis@tarr11

        Issue actions

          Code Spliting · Issue #65 · rails/webpacker