✨ [feature] 添加Base Version Gzip大小.

lanjingling0510 · May 19, 2017 · cf08b79 · cf08b79
1 parent 27f684b
commit cf08b79
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 35 deletions.
diff --git a/src/azer-compare.js b/src/azer-compare.js
@@ -6,7 +6,13 @@ const chalk = require('chalk');
 const _ = require('lodash');
 const filesize = require('filesize');
 const dir = require('./util/dir.js');
-const {baseTable, compareTable, analyzeTable, summaryBox, tipBox} = require('./util/blessed.js');
+const {
+  baseTable,
+  compareTable,
+  analyzeTable,
+  summaryBox,
+  tipBox,
+} = require('./util/blessed.js');
 const ROOT_PATH = process.cwd();
 // bundle分析存储目录
 const DEST_PATH = path.resolve(ROOT_PATH, '.azer');
@@ -31,13 +37,12 @@ main();
 async function selectBaseVersion() {
   const choices = await dir
     .traverse(DEST_PATH)
-    .then(stats =>
-      stats.map(stat => [path.basename(stat.name, '.json')]),
-    );
+    .then(stats => stats.map(stat => [path.basename(stat.name, '.json')]));
   baseTable.updateView(choices);
   // 监听选择事件
   baseTable.on('select', value => {
     baseVersion = value.content.trim();
+    // 更新summary视图
     updateSummaryView();
     if (compareVersion) {
       (async () => {
@@ -55,13 +60,12 @@ async function selectBaseVersion() {
 async function selectCompareVersion() {
   const choices = await dir
     .traverse(DEST_PATH)
-    .then(stats =>
-      stats.map(stat => [path.basename(stat.name, '.json')]),
-    );
+    .then(stats => stats.map(stat => [path.basename(stat.name, '.json')]));
   compareTable.updateView(choices);
   // 监听选择事件
   compareTable.on('select', value => {
     compareVersion = value.content.trim();
+    // 更新summary视图
     updateSummaryView();
 
     if (baseVersion) {
@@ -116,6 +120,7 @@ async function analyzeBundles() {
       baseSize,
       compareSize,
       rankSize: baseSize - compareSize,
+      gzipBaseSize: gzipBaseSize,
       gzipRankSize: gzipBaseSize - gzipCompareSize,
     };
   });
@@ -131,26 +136,35 @@ function renderAnalyzeResult(list) {
     filesize(item.compareSize),
     formatRank(item.rankSize),
     formatRank(item.gzipRankSize),
-  ])
+  ]);
 
   // 清除提示框
   tipBox.detach();
 
   analyzeTable.updateView(data);
 
   const allSize = list.reduce((a, b) => a + b.baseSize, 0);
+  const allGzipSize = list.reduce((a, b) => a + b.gzipBaseSize, 0);
   const allCompareSize = list.reduce((a, b) => a + b.compareSize, 0);
   const allRankSize = list.reduce((a, b) => a + b.rankSize, 0);
   const allGzipRankSize = list.reduce((a, b) => a + b.gzipRankSize, 0);
 
-  let summaryBoxContent = `\n\n{center}All Size: ${filesize(allSize)}`;
+  let summaryBoxContent = `\n\n{center}All Size: ${filesize(allSize)} / (gzip) ${filesize(allGzipSize)}`;
   if (allRankSize > 0) {
-    summaryBoxContent += chalk.red(`   ↑ ${filesize(allRankSize)} / ${filesize(allGzipRankSize)}`);
-    summaryBoxContent += chalk.red(`   optimize: ${((allCompareSize - allSize) / allSize * 100).toFixed(2)}%`);
+    summaryBoxContent += chalk.red(
+      `   ↑ ${filesize(allRankSize)} / (gzip) ${filesize(allGzipRankSize)}`,
+    );
+    summaryBoxContent += chalk.red(
+      `   optimize: ${((allCompareSize - allSize) / allSize * 100).toFixed(2)}%`,
+    );
     summaryBoxContent += '  😕';
   } else if (allRankSize < 0) {
-    summaryBoxContent += chalk.green(`   ↓ ${filesize(-allRankSize)} / ${filesize(-allGzipRankSize)}`);
-    summaryBoxContent += chalk.green(`   optimize: ${((allCompareSize - allSize) / allSize * 100).toFixed(2)}%`);
+    summaryBoxContent += chalk.green(
+      `   ↓ ${filesize(-allRankSize)} / (gzip) ${filesize(-allGzipRankSize)}`,
+    );
+    summaryBoxContent += chalk.green(
+      `   optimize: ${((allCompareSize - allSize) / allSize * 100).toFixed(2)}%`,
+    );
     summaryBoxContent += '  😝';
   } else {
     summaryBoxContent += '    -     -';
@@ -161,14 +175,16 @@ function renderAnalyzeResult(list) {
 }
 
 // 更新概览视图
-function updateSummaryView () {
+function updateSummaryView() {
+  let content = '';
   if (baseVersion) {
-    summaryBox.updateView(chalk.green('Base    Version: ' + baseVersion + '\n'));
+    content = chalk.green('Base    Version: ' + baseVersion + '\n');
   }
 
   if (compareVersion) {
-    summaryBox.updateView(summaryBox.content + chalk.green('Compare Version: ' + compareVersion + '\n'));
+    content += chalk.green('Compare Version: ' + compareVersion + '\n');
   }
+  summaryBox.updateView(content);
 }
 
 // 格式化变化量

diff --git a/src/util/blessed.js b/src/util/blessed.js
@@ -14,9 +14,9 @@ const grid = new contrib.grid({rows: 12, cols: 12, screen: screen});
 // 目标版本
 const baseTable = grid.set(
   0,
-  8,
+  9,
   6,
-  4,
+  3,
   blessed.listtable,
   makeScrollList([30]),
 );
@@ -29,9 +29,9 @@ baseTable.updateView = data => {
 // 对比版本
 const compareTable = grid.set(
   6,
-  8,
+  9,
   6,
-  4,
+  3,
   blessed.listtable,
   makeScrollList([30]),
 );
@@ -45,8 +45,8 @@ compareTable.updateView = data => {
 const analyzeTable = grid.set(
   0,
   0,
+  10,
   9,
-  8,
   blessed.listtable,
   makeScrollList([30, 20, 20, 20, 20]),
 );
@@ -58,27 +58,15 @@ analyzeTable.updateView = data => {
 };
 
 // 总览视图
-const summaryBox = grid.set(9, 0, 3, 8, blessed.box, {
-  label: '  💖  Summary',
-  tags: true,
-  padding: 1,
-  border: {
-    type: 'line',
-  },
-  style: {
-    fg: 'white',
-    border: {fg: 'cyan'},
-    hover: {border: {fg: 'green'}},
-  },
-});
+const summaryBox = grid.set(9, 0, 3, 9, blessed.box, makeScrollBox());
 
 summaryBox.updateView = content => {
   summaryBox.content = content;
   screen.render();
 };
 
 // 提示框
-const tipBox = grid.set(3, 2, 4, 4, blessed.box, {
+const tipBox = grid.set(3, 3, 4, 4, blessed.box, {
   tags: true,
   style: {
     border: {
@@ -112,6 +100,7 @@ screen.render();
 analyzeTable.setLabel('  🌈  Analytic View');
 baseTable.setLabel('  📝  Base Version');
 compareTable.setLabel('  📝  Compare Version');
+summaryBox.setLabel('  💖  Summary');
 
 function makeScrollList(columnWidth) {
   const options = makeList(columnWidth);
@@ -153,6 +142,18 @@ function makeBox() {
   };
 }
 
+function makeScrollBox() {
+  const options = makeBox();
+  options.scrollable = true;
+  options.scrollbar = {ch: ' '};
+  options.style.scrollbar = {bg: 'green', fg: 'white'};
+  options.style.header = {fg: 'cyan'};
+  options.vi = true;
+  options.alwaysScroll = true;
+  options.mouse = true;
+  return options;
+}
+
 module.exports = {
   baseTable: baseTable,
   compareTable: compareTable,