Comments (20)
You can try npm dedupe, according to the documentation it should merge modules with the same (similar) version number. (Not tested yet)
Merging modules with different versions is very risky.
A similar feature is in my mind for a long time: Finding modules with the same code, but maybe different depedencies and merging them. At runtime I would include only a reference to the shared code and a dependency mapping table. It is a bit complex to implement, but this wouldn't break anything.
A small note: even merging modules with exact the same version can break something. If you rely on being the only user of you local module and the module has some static state. (very rar and bad style)
from webpack.
Definitly not in 0.9
from webpack.
It is risky - that's why it should be opt-in. But I don't think that bundling two different versions of e.g. underscore
for the client is the right thing to do.
But you're right: This could also be the job of npm when deploying the application. You may close this one or keep it open as a reminder.
Btw: components keeps the dependency hierarchy flat. I think, both styles - deep (npm) and flat (component) - are appropriate for their targeted environment.
from webpack.
This will now become relevant as we're trying to split alamid in different modules.
from webpack.
This will come...
from webpack.
Here is the planned deduplication code. See it as riddle...
(function(m/*odules*/){
for(var i in m) {
switch(typeof m[i]) {
case "number":
m[i] = m[m[i]];
break;
case "object":
m[i] = (function(fn) {
var args = [].slice.call(arguments, 1);
return function(a,b,c) {
m[fn].apply(null, [a,b,c].concat(args));
};
}.apply(null, m[i]));
break;
}
}
})
EDIT: use Array.prototype.concat
from webpack.
Looks good! Slice, unshift, apply - that's the way we go! π
from webpack.
Should be concat.
from webpack.
I thought Array.prototype.concat
isn't supported by IE6, but I think I was wrong... So it could be optimized a bit π thanks
from webpack.
Could you tell us a bit about your plans? I think this is a hot topic that needs to be discussed as it's not trivial.
from webpack.
I'll only perform safe optimization. If enabled a hash over each module source code (before dependencies) will detect duplicates. Dependencies can and will be different.
An example without dependencies:
node_modules/a/file.js
-> module id 1node_mdoules/b/node_modules/a/file.js
-> module id 2
With the source:
module.exports = { value: 123 };
would result in
{
1: function(module, exports, require) {
module.exports = { value: 123 };
},
2: 1
}
The above code fragment than transform this array.
With dependencies it is a bit complexer:
node_modules/a/index.js
-> module id 3node_mdoules/b/node_modules/a/index.js
-> module id 4
With the source:
module.exports = require("./file");
Would result in
{
3: [5, 1],
4: [5, 2],
5: function(module, exports, require, __webpack_dependency_xyz__) {
module.exports = require(/*! ./file */__webpack_dependency_xyz__);
}
}
assert(require("a") !== require("b/node_modules/a"))
from webpack.
So the code is not duplicated but require("a")
returns a different instance than require("b/node_modules/a")
? Is semver taking into account?
from webpack.
yes. No.
I think semver is too high level for webpack... It's working on file level, while semver is package level... semver is the job of npm.
from webpack.
So how do you decide that two modules are the same? String comparison?
from webpack.
yes, maybe optimized with a hash. Maybe I'll compare after minimizing...
from webpack.
0.10.0-beta20 has experimental support. --optimize-dedupe
There is some stuff missing. Webpack may exit with a "Template cannot be applied as TemplateArgument" exception.
from webpack.
Nice .. π
from webpack.
Here is an example: https://github.com/webpack/webpack/tree/master/examples/dedupe
from webpack.
And another with code splitting: https://github.com/webpack/webpack/tree/master/examples/code-splitted-dedupe
from webpack.
So, first using npm dedupe
to reduce the dependencies according to semver and then webpack's dedupe to remove duplication on file-level (if there are some remaining) will probably have the best result.
from webpack.
Related Issues (20)
- Webpack build error for second time HOT 1
- `exportsPresence` does not work for unused imports HOT 3
- Implement ability to use "node:" prefixes for Node.js core modules HOT 1
- mangled exports breaks with destructuring assignment of JSON imports HOT 7
- there are confusing JDocs code
- Potential bug issues
- Webpack is not resolving node_modules specified in `resolve.modules` property.
- Dynamically loading chunks
- [Code implementation issues] ArrayQueue
- [feature] create cli HOT 3
- Not able to build node script
- bootstrap:27 Uncaught TypeError: __webpack_require__.nmd is not a function
- Self-reference dependency has unused export name when imported inside of a web worker
- support `import.meta.dirname` and `import.meta.filename` HOT 2
- <!-- identifier: admin-actions -->
- Remote into Web Component from React giving an error saying " Module does not exist in container"
- Multiple DefinePlugin instances cause aggressive cache invalidation due to collisions HOT 7
- Webpack fails when importing module
- import .scss build to js, the exported mapping is inconsistent with the usageγUrgent!!γ
- Unused code elimination and deduplication is not applied when using sass's api: 'legacy' setting
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack.