Closed
Description
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 commentedon Jan 19, 2017
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:
gauravtiwari commentedon Mar 23, 2017
@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 commentedon Apr 4, 2017
@gauravtiwari could you please share a line of code where code splitting is configured? cause I can't find it
xdmx commentedon Apr 11, 2017
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'
andimport { 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
andreact-dom
in a single file (vendor
,bundle
,preload
) and then using it from packs without having to import them each time?gauravtiwari commentedon Apr 11, 2017
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 commentedon Apr 20, 2017
It wasn't too clear to me how to do this. What I did was created a CommonsChunkPlugin per @gauravtiwari
But then I also created a separate pack called common.js in
app/javascript/packs/common.js
which lets you reference thejavascript_pack_tag
In this pack, I simply just imported the libraries that should show up in common:
Then, in my rails code (HAML), include the common pack first
bessey commentedon Apr 28, 2017
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 setminChunks
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 commentedon Feb 12, 2018
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/
Fix asset_pack_path example (rails#65)