rollup-plugin-visualizer - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

package.json

 {
   "name": "rollup-plugin-visualizer",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "main": "plugin.js",
@@ -5,0 +5,0 @@ "author": "Denis Bardadym <[e-mail]>",

plugin.js

 const fs = require('fs');
 const path = require('path');
+const SourceMapConsumer = require('source-map').SourceMapConsumer;
 
@@ -13,5 +14,7 @@ const cssString = fs.readFileSync(path.join(__dirname, 'lib', './style.css'), 'utf8');
   var filename = opts.filename || 'stats.html';
+  var useSourceMap = !!opts.sourcemap;
 
   return {
-    ongenerate({ bundle }) {
+    ongenerate({ bundle }, rendered) {
+
       let root = {
@@ -22,2 +25,6 @@ name: 'root',
 
+      if (useSourceMap) {
+        addMinifiedSizesToModules(bundle, rendered);
+      }
+
       bundle.modules.forEach(module => {
@@ -27,3 +34,3 @@ let name = module.id;
           //dependencies: module.dependencies,
-          size: Buffer.byteLength(module.code, 'utf8'),
+          size: useSourceMap ? (module.minifiedSize || 0) : Buffer.byteLength(module.code, 'utf8'),
           originalSize: Buffer.byteLength(module.originalCode, 'utf8')
@@ -112,1 +119,73 @@ };
 }
+
+function getBytesPerFileUsingSourceMap(rendered) {
+
+  let map = new SourceMapConsumer(rendered.map);
+  let lines = rendered.code.split(/[\r\n]/);
+
+  let bytesPerFile = {};
+
+  // For every byte in the minified code, do a sourcemap lookup.
+  for (let line = 0; line < lines.length; line++) {
+    for (let col = 0; col < lines[line].length; col++) {
+      let result = map.originalPositionFor({ line: line + 1, column: col });
+      let source = result.source || 'root';
+      if (!bytesPerFile[source]) {
+        bytesPerFile[source] = 0;
+      }
+      bytesPerFile[source]++;
+    }
+  }
+  return Object.keys(bytesPerFile).map(file =>
+      ({ file: path.resolve(file), bytes: bytesPerFile[file] }));
+}
+
+
+
+// Given a file C:/path/to/file/on/filesystem.js
+// - remove extension
+// - strip filesystem root
+// - return path segments, starting from the tail and working backwards
+// segments('C:/path/to/file/on/filesystem.js') === ['filesystem', 'on', 'file', 'to', 'path']
+function segments(filepath) {
+  let parsed = path.parse(filepath);
+  let dirWithoutRoot = parsed.dir.substring(parsed.root.length);
+
+  return dirWithoutRoot.split(path.sep).concat(parsed.name).reverse();
+}
+
+// Adds a .minifiedSize property to each module in the bundle (using sourcemap data)
+// If the minified size could not be computed, no property is added.
+// Module id are mapped to sources by finding the best match.
+// Matching is done by removing the file extensions and comparing path segments
+function addMinifiedSizesToModules(bundle, rendered) {
+  let fileSizes = getBytesPerFileUsingSourceMap(rendered);
+
+  const findBestMatchingModule = filename => {
+    let filenameSegments = segments(filename);
+
+    for (let i = 1; i <= filenameSegments.length; i++) {
+      let leftVals = filenameSegments.slice(0, i);
+
+      let matches = bundle.modules.filter(module => {
+        let moduleSegments = segments(module.id);
+        let rightVals = moduleSegments.slice(0, i);
+        if (rightVals.length !== leftVals.length) {
+          return false;
+        }
+        return rightVals.every((rightVal, i) => rightVal === leftVals[i]);
+      });
+
+      if (matches.length === 1) {
+        return matches[0];
+      }
+    }
+
+    return null;
+  };
+
+  fileSizes.forEach(tuple => {
+    let module = findBestMatchingModule(tuple.file);
+    if (module) {module.minifiedSize = tuple.bytes;}
+  });
+}

README.md

@@ -33,4 +33,17 @@ # Rollup Plugin Visualizer
 
+The file sizes reported are before any minification happens (if UglifyJS is being used, for example).
+Minified module sizes can be calculated using the source maps.
+To enable this mode, pass `{ sourcemap: true }`
+
+```javascript
+var Visualizer = require('rollup-plugin-visualizer');
+
+//...
+plugins: [Visualizer({
+  sourcemap: true
+})],
+//...
+```
 ## Acknowledges
 
 Initially this plugin is based on [webpack-visualizer](http://chrisbateman.github.io/webpack-visualizer/), but at the end rest only styles and layout. Thanks tons of people around internet for great examples of d3 usage.

New alerts

License Policy Violation

License

This 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

License

This 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

83641

increased by3.66%

Lines of code

539

increased by13%

Number of lines in readme file

49

increased by36.11%

No dependency changes