Does this tool support multiple entries and feature like `webpack.optimize.CommonsChunkPlugin` #139

plantain-00 · 2017-12-08T13:46:04Z

Choose one: 🙋 feature request?

🎛 Configuration (.babelrc, package.json, cli command)

// index.html
<script src="vendor.js"></script>
<script src="index.js"></script>

// index.js
import React from "react";

// other code

// vendor.js
import "react";
import "react-dom";

🤔 Expected Behavior

https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin

😯 Current Behavior

💁 Possible Solution

🔦 Context

My webpack config uses this feature, if this tool support this feature, I can try this tool rather than webpack.

🌍 Your Environment

davidnagli · 2017-12-08T13:48:58Z

This sounds pretty cool.

I’m trying to understand what commonschunkplugin does, but I don’t really understand the point. Do you mind explaining it a bit?

bickmista · 2017-12-08T15:30:07Z

From my understanding the commonschunkplugin allows you to split out frequently used libraries into its own bundle so that they all get loaded at once and so you can have smaller application bundles.

plantain-00 · 2017-12-08T22:39:29Z

commonschunkplugin works with code splitting, there is also a link about its point: https://webpack.js.org/guides/code-splitting/#prevent-duplication

sudhakar · 2017-12-09T04:38:38Z

If a module is already imported in vendor.js, it doesn't appear to get added in index.js bundle. Atleast from the bundle size, that what it appears to be when I tested.

Can anyone confirm?

plantain-00 · 2017-12-09T06:54:12Z

@sudhakar That's right.
Usually, index.js changes frequently, vendor.js doesn't change, so bundled vendor.js's hash doesn't change too(eg, 500KB), so a browser will not load bundled vendor.js again when I just change index.js, it just reload bundled index.js(eg, 200KB).
Without commonschunkplugin, a browser will always reload whole js file(eg,700KB) even I just make a small change.

sudhakar · 2017-12-09T09:00:34Z

@plantain-00 I have used commonschunkplugin. Atleast from the bundle size it generated, looks like parcel already does it by default. AFAIK, no config or plugin is required to make it work like commonschunkplugin

So I would say give it a try :)

sudhakar · 2017-12-09T09:05:50Z

Here's a excerpt from the docs which confirms that

If an asset is required in more than one bundle, it is hoisted up to the nearest common ancestor in the bundle tree so it is not included more than once.

plantain-00 · 2017-12-09T13:12:21Z

It seems it supports commonschunkplugin for development mode, production mode failed because of #8

TimNZ · 2018-01-31T06:25:04Z

Any intention to support similar functionality as CommonsChunkPlugin?
Very helpful for reducing download size in deployment of updates.

https://survivejs.com/webpack/building/bundle-splitting/

devongovett · 2018-01-31T18:58:18Z

This already happens automatically. If you use a dynamic import to do code splitting, the common dependencies are automatically hoisted into the common bundle. See https://parceljs.org/code_splitting.html.

TimNZ · 2018-01-31T19:33:51Z

I read through that.

I can test this, but want to be clear on the intended/supported use case.

In the simplest case - If I want all my node_modules bundled into a common .js file, I could make a dummy .JS file that imports them e.g. React, use dynamic import on the dummy, and that will result in split bundles where my packages are hoisted into a common bundle?

In theory the common bundle JS should never change if I'm only changing my app src and don't import any more common modules, or don't update any packages.

I think I prefer the more explicit multiple entry point support with Webpack as the intent it is clear.

TimNZ · 2018-01-31T19:37:31Z

This ties in with my query in another issue for your website repo I commented on yesterday re cache busting and deployment strategies that Parcel could perhaps make easier with zero config

parcel-bundler/website#59 (comment)

sant123 · 2018-02-07T17:58:09Z

We can accomplish chunks vendor splitting doing this:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Testing parcel</title>
    <link rel="stylesheet" href="../node_modules/bulma/css/bulma.css">
</head>
<body>
    <div id="root"></div>
    <script src="./js/main.js"></script>
</body>
</html>

main.js

import "./vendor";

import React from "react";
import ReactDOM from "react-dom";

import HomeComponent from "./home/home.component";

ReactDOM.render(<HomeComponent />, document.getElementById("root"));

vendor.js

// Create additional bundles for these libraries.
import("react");
import("react-dom");

home.component.jsx

import React from "react";

export default class HomeComponent extends React.Component {
  render() {
      return (
        <div>Hello world :)</div>
      );
  }
}

The result...

chris-kobrzak · 2018-03-02T16:35:05Z

Really nice post, @sant123!

Just to add my penny, if anyone wants to try this solution, please make sure you use the rounded brackets syntax in the import statements you'd like to split out.

So e.g.:

import('react')

not

import 'react'

CraigHarley · 2018-03-05T09:50:24Z

Is it possible to name these chunks?

sant123 · 2018-03-05T13:50:37Z

Do you really need it? The name is according with the package you're importing.

cevek · 2018-10-15T08:27:10Z

We can accomplish chunks vendor splitting doing this:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Testing parcel</title>
    <link rel="stylesheet" href="../node_modules/bulma/css/bulma.css">
</head>
<body>
    <div id="root"></div>
    <script src="./js/main.js"></script>
</body>
</html>

main.js

import "./vendor";

import React from "react";
import ReactDOM from "react-dom";

import HomeComponent from "./home/home.component";

ReactDOM.render(<HomeComponent />, document.getElementById("root"));

vendor.js

// Create additional bundles for these libraries.
import("react");
import("react-dom");

home.component.jsx

import React from "react";

export default class HomeComponent extends React.Component {
  render() {
      return (
        <div>Hello world :)</div>
      );
  }
}

The result...

This solution will create tons of my vendor packaged files

frednomoon · 2019-04-24T14:20:53Z

@chris-kobrzak @sant123 i'm having some problems using the solution you are advocating above. I am successfully splitting React & ReactDOM from my main bundle but they are not being added to the index.html.
As a result this method essentially "lazy loads" react & react-dom meaning that their download is not initiated until the main bundle has finished downloading as you can see in these screenshots:

(before)

(after)

Do you have any idea where I might be going wrong here?

Update: I realise my vendor chunks are also not being given consistent names which is also different to your result. Probably part of the same problem?

plantain-00 changed the title ~~Do this tool support multiple entries and feature like webpack.optimize.CommonsChunkPlugin~~ Does this tool support multiple entries and feature like webpack.optimize.CommonsChunkPlugin Dec 8, 2017

plantain-00 closed this as completed Dec 9, 2017

azdanov mentioned this issue Nov 6, 2018

[ON HOLD] Support for webpack 4 laravel-mix/laravel-mix#1495

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Does this tool support multiple entries and feature like `webpack.optimize.CommonsChunkPlugin` #139

Does this tool support multiple entries and feature like `webpack.optimize.CommonsChunkPlugin` #139

plantain-00 commented Dec 8, 2017 •

edited

Loading

davidnagli commented Dec 8, 2017 •

edited

Loading

bickmista commented Dec 8, 2017

plantain-00 commented Dec 8, 2017

sudhakar commented Dec 9, 2017

plantain-00 commented Dec 9, 2017

sudhakar commented Dec 9, 2017

sudhakar commented Dec 9, 2017

plantain-00 commented Dec 9, 2017

TimNZ commented Jan 31, 2018

devongovett commented Jan 31, 2018

TimNZ commented Jan 31, 2018 •

edited

Loading

TimNZ commented Jan 31, 2018

sant123 commented Feb 7, 2018

chris-kobrzak commented Mar 2, 2018

CraigHarley commented Mar 5, 2018

sant123 commented Mar 5, 2018

cevek commented Oct 15, 2018

frednomoon commented Apr 24, 2019 •

edited

Loading

Does this tool support multiple entries and feature like webpack.optimize.CommonsChunkPlugin #139

Does this tool support multiple entries and feature like webpack.optimize.CommonsChunkPlugin #139

Comments

plantain-00 commented Dec 8, 2017 • edited Loading

🎛 Configuration (.babelrc, package.json, cli command)

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

🌍 Your Environment

davidnagli commented Dec 8, 2017 • edited Loading

bickmista commented Dec 8, 2017

plantain-00 commented Dec 8, 2017

sudhakar commented Dec 9, 2017

plantain-00 commented Dec 9, 2017

sudhakar commented Dec 9, 2017

sudhakar commented Dec 9, 2017

plantain-00 commented Dec 9, 2017

TimNZ commented Jan 31, 2018

devongovett commented Jan 31, 2018

TimNZ commented Jan 31, 2018 • edited Loading

TimNZ commented Jan 31, 2018

sant123 commented Feb 7, 2018

chris-kobrzak commented Mar 2, 2018

CraigHarley commented Mar 5, 2018

sant123 commented Mar 5, 2018

cevek commented Oct 15, 2018

frednomoon commented Apr 24, 2019 • edited Loading

Does this tool support multiple entries and feature like `webpack.optimize.CommonsChunkPlugin` #139

Does this tool support multiple entries and feature like `webpack.optimize.CommonsChunkPlugin` #139

plantain-00 commented Dec 8, 2017 •

edited

Loading

davidnagli commented Dec 8, 2017 •

edited

Loading

TimNZ commented Jan 31, 2018 •

edited

Loading

frednomoon commented Apr 24, 2019 •

edited

Loading