perf: remove lodash dependency (#22)

unjs · Oct 31, 2018 · 883a0dc · 883a0dc
1 parent fd4bec3
commit 883a0dc
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -45,7 +45,6 @@
     "chalk": "^2.4.1",
     "consola": "^2.0.0-0",
     "figures": "^2.0.0",
-    "lodash": "^4.17.11",
     "log-update": "^2.3.0",
     "pretty-time": "^1.1.0",
     "std-env": "^2.0.2",

diff --git a/src/description.js b/src/description.js
@@ -1,8 +1,8 @@
-import _ from 'lodash';
+import { startCase } from './utils';
 
 const DB = {
   loader: {
-    get: (loader) => _.startCase(loader),
+    get: (loader) => startCase(loader),
   },
   ext: {
     get: (ext) => `${ext} files`,
@@ -16,7 +16,7 @@ const DB = {
 
 export default function getDescription(category, keyword) {
   if (!DB[category]) {
-    return _.startCase(keyword);
+    return startCase(keyword);
   }
 
   if (DB[category][keyword]) {

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,5 @@
 import webpack from 'webpack';
 import chalk from 'chalk';
-import _ from 'lodash';
 import logUpdate from 'log-update';
 import env from 'std-env';
 import Consola from 'consola';
@@ -15,6 +14,7 @@ import {
   formatStats,
   colorize,
   ellipsisLeft,
+  throttle,
 } from './utils';
 
 const consola = Consola.withTag('webpackbar');
@@ -50,7 +50,7 @@ export default class WebpackBarPlugin extends webpack.ProgressPlugin {
     this.handler = (percent, msg, ...details) =>
       this.updateProgress(percent, msg, details);
 
-    this._render = _.throttle(this.render, 100);
+    this._render = throttle(this.render.bind(this), 1, 100);
 
     this.logUpdate = this.options.logUpdate || $logUpdate;
 
@@ -152,29 +152,33 @@ export default class WebpackBarPlugin extends webpack.ProgressPlugin {
 
     const columns = this.stream.columns || 80;
 
-    const stateLines = _.sortBy(Object.keys(sharedState)).map((name) => {
-      const state = sharedState[name];
-      const color = colorize(state.color);
+    const stateLines = Object.keys(sharedState)
+      .sort()
+      .map((name) => {
+        const state = sharedState[name];
+        const color = colorize(state.color);
 
-      if (!state.isRunning) {
-        const color2 = state.progress === 100 ? color : chalk.grey;
-        return color2(`${BULLET} ${name}\n`);
-      }
+        if (!state.isRunning) {
+          const color2 = state.progress === 100 ? color : chalk.grey;
+          return color2(`${BULLET} ${name}\n`);
+        }
 
-      return `${[
-        color(BULLET),
-        color(name),
-        renderBar(state.progress, state.color),
-        state.msg,
-        `(${state.progress || 0}%)`,
-        chalk.grey((state.details && state.details[0]) || ''),
-        chalk.grey((state.details && state.details[1]) || ''),
-      ].join(' ')}\n ${
-        state.request
-          ? chalk.grey(ellipsisLeft(formatRequest(state.request), columns - 2))
-          : ''
-      }\n`;
-    });
+        return `${[
+          color(BULLET),
+          color(name),
+          renderBar(state.progress, state.color),
+          state.msg,
+          `(${state.progress || 0}%)`,
+          chalk.grey((state.details && state.details[0]) || ''),
+          chalk.grey((state.details && state.details[1]) || ''),
+        ].join(' ')}\n ${
+          state.request
+            ? chalk.grey(
+                ellipsisLeft(formatRequest(state.request), columns - 2)
+              )
+            : ''
+        }\n`;
+      });
 
     if (hasRunning()) {
       const title = chalk.underline.blue('Compiling');

diff --git a/src/utils.js b/src/utils.js
@@ -1,7 +1,6 @@
 import path from 'path';
 
 import chalk from 'chalk';
-import _ from 'lodash';
 import figures from 'figures';
 import { table } from 'table';
 import prettyTime from 'pretty-time';
@@ -13,6 +12,35 @@ const BLOCK_CHAR = '█';
 const BLOCK_CHAR2 = '█';
 const NEXT = chalk.blue(figures(' › '));
 
+export const first = (arr) => arr[0];
+export const last = (arr) => (arr.length ? arr[arr.length - 1] : null);
+export const startCase = (str) => str[0].toUpperCase() + str.substr(1);
+export const range = (len) => {
+  const arr = [];
+  for (let i = 0; i < len; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+export function throttle(callback, limit, time) {
+  let calledCount = 0;
+  let timeout = null;
+
+  return function throttledFn() {
+    if (limit > calledCount) {
+      calledCount += 1;
+      callback();
+    }
+
+    if (!timeout) {
+      timeout = setTimeout(() => {
+        calledCount = 0;
+        timeout = null;
+      }, time);
+    }
+  };
+}
+
 export const BULLET = figures('●');
 export const TICK = chalk.green(figures('✔'));
 
@@ -29,16 +57,16 @@ export const renderBar = (progress, color) => {
   const bg = chalk.white(BLOCK_CHAR);
   const fg = colorize(color)(BLOCK_CHAR2);
 
-  return _.range(BAR_LENGTH)
+  return range(BAR_LENGTH)
     .map((i) => (i < w ? fg : bg))
     .join('');
 };
 
 const hasValue = (s) => s && s.length;
 
 const nodeModules = `${path.delimiter}node_modules${path.delimiter}`;
-const removeAfter = (delimiter, str) => _.first(str.split(delimiter));
-const removeBefore = (delimiter, str) => _.last(str.split(delimiter));
+const removeAfter = (delimiter, str) => first(str.split(delimiter));
+const removeBefore = (delimiter, str) => last(str.split(delimiter));
 
 const firstMatch = (regex, str) => {
   const m = regex.exec(str);
@@ -79,19 +107,13 @@ export const formatStats = (allStats) => {
   Object.keys(allStats).forEach((category) => {
     const stats = allStats[category];
 
-    lines.push(`Stats by ${chalk.bold(_.startCase(category))}`);
+    lines.push(`Stats by ${chalk.bold(startCase(category))}`);
 
     let totalRequests = 0;
     const totalTime = [0, 0];
 
     const data = [
-      [
-        _.startCase(category),
-        'Requests',
-        'Time',
-        'Time/Request',
-        'Description',
-      ],
+      [startCase(category), 'Requests', 'Time', 'Time/Request', 'Description'],
     ];
 
     Object.keys(stats).forEach((item) => {