Last active
November 21, 2017 04:38
-
-
Save kevinbarabash/8cb0871ee4d6decaca39eb690eb18f6f to your computer and use it in GitHub Desktop.
Why does foo, bar, and baz depend on all three vendor bundles?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const moment = require("moment"); | |
module.exports = "bar"; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const immutable = require("immutable"); | |
module.exports = "foo"; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const icepick = require("icepick"); | |
module.exports = "foo"; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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