Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
electrode-bundle-analyzer
Advanced tools
Readme
A webpack bundle analyzer that gives you a detail list of all the files that went into your deduped and minified bundle JS file.
If you use webpack to bundle your code and apply all the optimization to your production bundle output, then you get a very compact JS file that's impossible to read.
Do you wish you can get a list of what files made their way into that bundle after all the optimizations have been applied? Well, this module will make your wish come true.
$ npm i electrode-bundle-analyzer --save-dev
In order for this module to be able to make sense of your optimized bundle file, you need to preserve a comment that webpack inserted into the bundle which indicates the module ID, and save the stats.json
from webpack.
The module ID comment normally looks something like this:
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
We want the line /* 1 */
to be preserved.
It'd be looking something pretty mundane like this when it's preserved in the optimized bundle.
... ))}},/* 1 */
function(e,t,n){"use strict";e.exports=n(2)},/* 2 */
function(e,t,n){ ...
Assuming you use UglifyJsPlugin to minify your bundle. In order to preserve that line, add to the comments regex as indicated below.
To generate the stats.json
file, one recommended plugin is the webpack-stats-plugin. Add it to your webpack config as indicated below.
var optimize = require("webpack").optimize;
var StatsWriterPlugin = require("webpack-stats-plugin").StatsWriterPlugin;
var statsOptions = {
filename: "stats.json",
fields: null,
transform: function (data) {
data.modules.forEach(function (m) {
delete m.source;
});
delete data.children;
return JSON.stringify(data, null, 2);
}
};
var webPackConfig = {
plugins: [
new optimize.UglifyJsPlugin({
compress: {
warnings: false
},
comments: /^\**!|^ [0-9]+ $|@preserve|@license/
}),
new StatsWriterPlugin(statsOptions)
]
};
Once you have the bundle and stats files, you can generate detail module files from them.
The simple command is:
$ analyze-bundle -b bundle.js -s stats.json
You can run it without any options or -h
to get full usage output:
Usage: analyze-bundle --bundle [bundle.js] --stats [stats.json] --dir [output_dir] --rewrite
Options:
-b, --bundle JS bundle file from webpack [required]
-s, --stats stats JSON file from webpack[default: "dist/server/stats.json"]
-r, --rewrite rewrite the bundle file with module ID comments removed
-d, --dir directory to write the analyze results [default: ".etmp"]
-h, --help Show help [boolean]
With the rewrite option, you can remove the module ID comments from your optimized bundle after it's been analyzed.
If you don't specify an output directory, a default one .etmp
will be created and a .gitignore
file is also added there to avoid git picking it up.
Two files will be written to the output directory:
bundle.analyze.json
bundle.analyze.tsv
The tsv
file is a Tab Separated Values text file that you can easily import into a spreadsheet for viewing.
For example:
Module ID Full Path Identity Path Size (bytes)
0 ./client/app.jsx ./client/app.jsx 328
1 ./~/react/react.js ~/react/react.js 46
2 ./~/react/lib/React.js ~/react/lib/React.js 477
3 ./~/object-assign/index.js ~/object-assign/index.js 984
4 ./~/react/lib/ReactChildren.js ~/react/lib/ReactChildren.js 1344
The ~
is a replacement for node_modules
.
The best way to make use of the result is to import the tsv
file into a spreadsheet and sort the Identity Path
column. Any duplicate entries there means you are pulling multiple versions of the same module into your bundle.
TBD: We plan to add more feature to generate a summary report from the analyze results.
Built with :heart: by Team Electrode @WalmartLabs.
FAQs
[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
The npm package electrode-bundle-analyzer receives a total of 38 weekly downloads. As such, electrode-bundle-analyzer popularity was classified as not popular.
We found that electrode-bundle-analyzer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.