Skip to content

Instantly share code, notes, and snippets.

@kevinbarabash
Last active November 21, 2017 04:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinbarabash/8cb0871ee4d6decaca39eb690eb18f6f to your computer and use it in GitHub Desktop.
Save kevinbarabash/8cb0871ee4d6decaca39eb690eb18f6f to your computer and use it in GitHub Desktop.
Why does foo, bar, and baz depend on all three vendor bundles?
const moment = require("moment");
module.exports = "bar";
const immutable = require("immutable");
module.exports = "foo";
const icepick = require("icepick");
module.exports = "foo";
function MyPlugin(options) {
// Configure your plugin with options...
}
const getAllDeps = (chunk) => {
if (chunk.parents.length > 0) {
const result = [];
for (const parent of chunk.parents) {
result.push(...getAllDeps(parent));
}
result.push(...chunk.parents.map(parent => parent.id));
return result;
} else {
return [];
}
};
MyPlugin.prototype.apply = function(compiler) {
compiler.plugin("compilation", function(compilation) {
compilation.plugin("record-chunks", function(chunks, records) {
console.log('chunk: [depdencies]');
console.log('-------------------');
const lookup = {};
for (const chunk of chunks) {
lookup[chunk.id] = chunk.name;
}
for (const chunk of chunks) {
console.log(`${lookup[chunk.id]}: [${getAllDeps(chunk).map(chunkId => lookup[chunkId])}]`);
}
console.log('');
});
});
};
module.exports = MyPlugin;
chunk: [depdencies]
-------------------
vendor2: [vendor3]
vendor1: [vendor3,vendor2]
foo: [vendor3,vendor2,vendor1]
baz: [vendor3,vendor2,vendor1] // require immutable, I would expend it to depend on vendor3 only
bar: [vendor3,vendor2,vendor1]
vendor3: []
Hash: 4a75e5ed5b4081369fc7
Version: webpack 3.8.1
Time: 632ms
Asset Size Chunks Chunk Names
vendor2.entry.js 479 kB 0 [emitted] [big] vendor2 // contains moment
vendor1.entry.js 14.2 kB 1 [emitted] vendor1 // contains icepick
foo.entry.js 173 bytes 2 [emitted] foo
baz.entry.js 177 bytes 3 [emitted] baz
bar.entry.js 172 bytes 4 [emitted] bar
vendor3.entry.js 148 kB 5 [emitted] vendor3 // contains immutable and the webpackJsonp implementation
const path = require('path');
const webpack = require('webpack');
const MyPlugin = require('./my-plugin.js');
module.exports = {
entry: {
'foo': './src/foo.js',
'bar': './src/bar.js',
'baz': './src/baz.js',
'vendor1': ['icepick'],
'vendor2': ['moment'],
'vendor3': ['immutable'],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].entry.js',
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ["vendor1", "vendor2", "vendor3"],
minChunks: Infinity
}),
new MyPlugin({}),
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment