-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Does this tool support multiple entries and feature like webpack.optimize.CommonsChunkPlugin
#139
Comments
webpack.optimize.CommonsChunkPlugin
webpack.optimize.CommonsChunkPlugin
This sounds pretty cool. I’m trying to understand what |
From my understanding the |
|
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? |
@sudhakar That's right. |
@plantain-00 I have used So I would say give it a try :) |
Here's a excerpt from the docs which confirms that
|
It seems it supports |
Any intention to support similar functionality as CommonsChunkPlugin? |
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. |
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. |
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 |
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... |
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 So e.g.: import('react') not import 'react' |
Is it possible to name these chunks? |
Do you really need it? The name is according with the package you're importing. |
This solution will create tons of my vendor packaged files |
@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 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? |
Choose one: 🙋 feature request?
🎛 Configuration (.babelrc, package.json, cli command)
🤔 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
The text was updated successfully, but these errors were encountered: