rollup-plugin-visualizer
Advanced tools
rollup-plugin-visualizer - npm Package Compare versions
Comparing version 0.5.0 to 0.6.0
| { | ||
| "name": "rollup-plugin-visualizer", | ||
| "version": "0.5.0", | ||
| "version": "0.6.0", | ||
| "main": "plugin.js", | ||
@@ -30,9 +30,12 @@ "author": "Denis Bardadym <bardadymchik@gmail.com>", | ||
| "d3-shape": "^1.0.3", | ||
| "eslint": "^3.8.1", | ||
| "eslint": "^4.19.1", | ||
| "prettier": "^1.11.1", | ||
| "rollup": "^0.56.5", | ||
| "rollup": "^0.57.1", | ||
| "rollup-plugin-commonjs": "^9.1.0", | ||
| "rollup-plugin-node-resolve": "^3.2.0", | ||
| "rollup-plugin-node-resolve": "^3.3.0", | ||
| "rollup-plugin-uglify": "^3.0.0" | ||
| }, | ||
| "engines": { | ||
| "node": ">=8.3.0" | ||
| } | ||
| } |
202
plugin.js
@@ -0,9 +1,21 @@ | ||
| "use strict"; | ||
| const fs = require("fs"); | ||
| const path = require("path"); | ||
| const mkdirp = require('mkdirp'); | ||
| const mkdirp = require("mkdirp"); | ||
| const util = require("util"); | ||
| const SourceMapConsumer = require("source-map").SourceMapConsumer; | ||
| const cssString = fs.readFileSync(path.join(__dirname, "lib", "./style.css"), "utf8"); | ||
| const jsString = fs.readFileSync(path.join(__dirname, "lib", "./pluginmain.js"), "utf8"); | ||
| const writeFileAsync = util.promisify(fs.writeFile); | ||
| const mkdirpAsync = util.promisify(mkdirp); | ||
| const cssString = fs.readFileSync( | ||
| path.join(__dirname, "lib", "./style.css"), | ||
| "utf8" | ||
| ); | ||
| const jsString = fs.readFileSync( | ||
| path.join(__dirname, "lib", "./pluginmain.js"), | ||
| "utf8" | ||
| ); | ||
| const PLUGIN_PREFIX = "\u0000"; | ||
@@ -13,64 +25,83 @@ | ||
| opts = opts || {}; | ||
| var filename = opts.filename || "stats.html"; | ||
| var title = opts.title || "RollUp Visualizer"; | ||
| var useSourceMap = !!opts.sourcemap; | ||
| const filename = opts.filename || "stats.html"; | ||
| const title = opts.title || "RollUp Visualizer"; | ||
| const useSourceMap = !!opts.sourcemap; | ||
| return { | ||
| ongenerate(args, rendered) { | ||
| var bundle = args.bundle; | ||
| const bundle = args.bundle; | ||
| var root = { | ||
| name: "root", | ||
| children: [] | ||
| }; | ||
| return Promise.resolve() | ||
| .then(() => { | ||
| if (useSourceMap) { | ||
| return addMinifiedSizesToModules(bundle, rendered); | ||
| } | ||
| }) | ||
| .then(() => { | ||
| const root = buildTree(bundle, useSourceMap); | ||
| flattenTree(root); | ||
| if (useSourceMap) { | ||
| addMinifiedSizesToModules(bundle, rendered); | ||
| } | ||
| const html = buildHtml(title, root, filename); | ||
| return writeFile(filename, html); | ||
| }); | ||
| } | ||
| }; | ||
| }; | ||
| bundle.modules.forEach(module => { | ||
| var name = module.id; | ||
| var m = { | ||
| //dependencies: module.dependencies, | ||
| size: useSourceMap ? module.minifiedSize || 0 : Buffer.byteLength(module.code, "utf8"), | ||
| originalSize: Buffer.byteLength(module.originalCode, "utf8") | ||
| }; | ||
| function buildTree(bundle, useSourceMap) { | ||
| const root = { | ||
| name: "root", | ||
| children: [] | ||
| }; | ||
| bundle.modules.forEach(module => { | ||
| const name = module.id; | ||
| const m = { | ||
| //dependencies: module.dependencies, | ||
| size: useSourceMap | ||
| ? module.minifiedSize || 0 | ||
| : Buffer.byteLength(module.code, "utf8"), | ||
| originalSize: Buffer.byteLength(module.originalCode, "utf8") | ||
| }; | ||
| if (name.indexOf(PLUGIN_PREFIX) === 0) { | ||
| addToPath(root, [name], m); | ||
| } else { | ||
| addToPath(root, name.split(path.sep), m); | ||
| } | ||
| }); | ||
| flattenTree(root); | ||
| if (name.indexOf(PLUGIN_PREFIX) === 0) { | ||
| addToPath(root, [name], m); | ||
| } else { | ||
| addToPath(root, name.split(path.sep), m); | ||
| } | ||
| }); | ||
| return root; | ||
| } | ||
| var html = `<!doctype html> | ||
| <title>${title}</title> | ||
| <meta charset="utf-8"> | ||
| <style>${cssString}</style> | ||
| <div> | ||
| <div> | ||
| <h1>${title}</h1> | ||
| function buildHtml(title, root) { | ||
| return `<!doctype html> | ||
| <title>${title}</title> | ||
| <meta charset="utf-8"> | ||
| <style>${cssString}</style> | ||
| <div> | ||
| <div> | ||
| <h1>${title}</h1> | ||
| <div id="chart"> | ||
| <div class="details" style="display: none;"> | ||
| <span class="details-name"></span> | ||
| <div class="details-percentage"></div> | ||
| of bundle size | ||
| <div class="details-size"></div> | ||
| </div> | ||
| </div> | ||
| <div id="chart"> | ||
| <div class="details" style="display: none;"> | ||
| <span class="details-name"></span> | ||
| <div class="details-percentage"></div> | ||
| of bundle size | ||
| <div class="details-size"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script>window.nodesData = ${JSON.stringify(root)};</script> | ||
| <script charset="UTF-8"> | ||
| ${jsString} | ||
| </script> | ||
| `; | ||
| mkdirp.sync(path.dirname(filename)); | ||
| fs.writeFileSync(filename, html); | ||
| } | ||
| }; | ||
| }; | ||
| </div> | ||
| </div> | ||
| <script>window.nodesData = ${JSON.stringify(root)};</script> | ||
| <script charset="UTF-8"> | ||
| ${jsString} | ||
| </script> | ||
| `; | ||
| } | ||
| function writeFile(filename, contents) { | ||
| return mkdirpAsync(path.dirname(filename)).then(() => | ||
| writeFileAsync(filename, contents) | ||
| ); | ||
| } | ||
| function getDeepMoreThenOneChild(tree) { | ||
@@ -82,7 +113,8 @@ if (tree.children && tree.children.length === 1) { | ||
| } | ||
| // if root children have only on child we can flatten this | ||
| function flattenTree(root) { | ||
| var newChildren = []; | ||
| let newChildren = []; | ||
| root.children.forEach(child => { | ||
| var commonParent = getDeepMoreThenOneChild(child); | ||
| const commonParent = getDeepMoreThenOneChild(child); | ||
| newChildren = newChildren.concat(commonParent.children); | ||
@@ -98,3 +130,3 @@ }); | ||
| var child = tree.children.filter(c => c.name === p[0])[0]; | ||
| let child = tree.children.filter(c => c.name === p[0])[0]; | ||
| if (!child) { | ||
@@ -115,13 +147,12 @@ child = { | ||
| function getBytesPerFileUsingSourceMap(rendered) { | ||
| var map = new SourceMapConsumer(rendered.map); | ||
| var lines = rendered.code.split(/[\r\n]/); | ||
| function getBytesPerFileUsingSourceMap(code, map) { | ||
| const lines = code.split(/[\r\n]/); | ||
| var bytesPerFile = {}; | ||
| const bytesPerFile = {}; | ||
| // For every byte in the minified code, do a sourcemap lookup. | ||
| for (var line = 0; line < lines.length; line++) { | ||
| for (var col = 0; col < lines[line].length; col++) { | ||
| var result = map.originalPositionFor({ line: line + 1, column: col }); | ||
| var source = result.source || "root"; | ||
| for (let line = 0; line < lines.length; line++) { | ||
| for (let col = 0; col < lines[line].length; col++) { | ||
| const result = map.originalPositionFor({ line: line + 1, column: col }); | ||
| const source = result.source || "root"; | ||
| if (!bytesPerFile[source]) { | ||
@@ -133,3 +164,6 @@ bytesPerFile[source] = 0; | ||
| } | ||
| return Object.keys(bytesPerFile).map(file => ({ file: path.resolve(file), bytes: bytesPerFile[file] })); | ||
| return Object.keys(bytesPerFile).map(file => ({ | ||
| file: path.resolve(file), | ||
| bytes: bytesPerFile[file] | ||
| })); | ||
| } | ||
@@ -143,6 +177,9 @@ | ||
| function segments(filepath) { | ||
| var parsed = path.parse(filepath); | ||
| var dirWithoutRoot = parsed.dir.substring(parsed.root.length); | ||
| const parsed = path.parse(filepath); | ||
| const dirWithoutRoot = parsed.dir.substring(parsed.root.length); | ||
| return dirWithoutRoot.split(path.sep).concat(parsed.name).reverse(); | ||
| return dirWithoutRoot | ||
| .split(path.sep) | ||
| .concat(parsed.name) | ||
| .reverse(); | ||
| } | ||
@@ -155,13 +192,11 @@ | ||
| function addMinifiedSizesToModules(bundle, rendered) { | ||
| var fileSizes = getBytesPerFileUsingSourceMap(rendered); | ||
| const findBestMatchingModule = filename => { | ||
| var filenameSegments = segments(filename); | ||
| const filenameSegments = segments(filename); | ||
| for (var i = 1; i <= filenameSegments.length; i++) { | ||
| var leftVals = filenameSegments.slice(0, i); | ||
| for (let i = 1; i <= filenameSegments.length; i++) { | ||
| const leftVals = filenameSegments.slice(0, i); | ||
| var matches = bundle.modules.filter(module => { | ||
| var moduleSegments = segments(module.id); | ||
| var rightVals = moduleSegments.slice(0, i); | ||
| const matches = bundle.modules.filter(module => { | ||
| const moduleSegments = segments(module.id); | ||
| const rightVals = moduleSegments.slice(0, i); | ||
| if (rightVals.length !== leftVals.length) { | ||
@@ -181,8 +216,11 @@ return false; | ||
| fileSizes.forEach(tuple => { | ||
| var module = findBestMatchingModule(tuple.file); | ||
| if (module) { | ||
| module.minifiedSize = tuple.bytes; | ||
| } | ||
| return SourceMapConsumer.with(rendered.map, null, map => { | ||
| const fileSizes = getBytesPerFileUsingSourceMap(rendered.code, map); | ||
| fileSizes.forEach(tuple => { | ||
| const module = findBestMatchingModule(tuple.file); | ||
| if (module) { | ||
| module.minifiedSize = tuple.bytes; | ||
| } | ||
| }); | ||
| }); | ||
| } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.81%
73812
- Lines of code
- increased by7.24%
533
No dependency changes