feat(build): update log ui

Author: hiroppy

packages/fusuma/package-lock.json

@@ -41,7 +41,6 @@
     "babel-plugin-prismjs": "^2.0.1",
     "caporal": "^1.4.0",
     "chalk": "^4.1.0",
-    "child-process-promise": "^2.2.1",
     "compression-webpack-plugin": "^7.1.2",
     "core-js": "^3.8.3",
     "css-loader": "^5.0.1",
@@ -71,7 +70,6 @@
     "regenerator-runtime": "^0.13.7",
     "rmfr": "^2.0.0",
     "style-loader": "^2.0.0",
-    "table": "^6.0.7",
     "terser-webpack-plugin": "^5.1.1",
     "webp-loader": "^0.6.0",
     "webpack": "^5.17.0",

packages/fusuma/package.json

@@ -7,6 +7,7 @@ const getRemoteOriginUrl = require('../utils/getRemoteOriginUrl');
 const { build: webpackBuild } = require('../webpack');
 const deleteDir = require('../utils/deleteDir');
 const fileServer = require('../server/fileServer');
+const outputBuildInfo = require('../webpack/outputBuildInfo');
 
 async function createOgImage(outputDirPath, publicPath) {
   const puppeteer = require('puppeteer');
@@ -58,7 +59,8 @@ async function build(config, isConsoleOutput = true) {
   config.build.useCache = false;
 
   await deleteDir(outputDirPath);
-  await webpackBuild(config, isConsoleOutput, (type) => {
+
+  const stats = await webpackBuild(config, (type) => {
     if (type === 'start-ssr') {
       spinner.setContent({ color: 'cyan', text: 'Rendering components to HTML...' });
     }
@@ -77,6 +79,11 @@ async function build(config, isConsoleOutput = true) {
   }
 
   spinner.stop();
+
+  if (isConsoleOutput) {
+    outputBuildInfo(stats);
+  }
+
   info('build', 'Completed!');
 }
 

packages/fusuma/src/tasks/build.js

@@ -1,11 +1,10 @@
 'use strict';
 
+const ghpages = require('gh-pages');
 const Spinner = require('../cli/Spinner');
 const { info } = require('../cli/log');
 
 async function deploy(config, options = {}) {
-  const ghpages = require('gh-pages');
-
   return new Promise((resolve, reject) => {
     const spinner = new Spinner();
     const { outputDirPath } = config.internal;

packages/fusuma/src/tasks/deploy.js

@@ -1,8 +1,9 @@
 'use strict';
 
-async function lazyload(pack, cb) {
-  const { spawn } = require('child-process-promise');
+const util = require('util');
+const spawn = util.promisify(require('child_process').spawn);
 
+async function lazyload(pack, cb) {
   try {
     return require(pack);
   } catch (e) {

packages/fusuma/src/utils/lazyloadModule.js

@@ -1,22 +1,17 @@
 'use strict';
 
-const combineConfig = require('./webpack.config');
-
 async function start(config) {
+  const combineConfig = require('./webpack.config');
   const server = require('../server');
 
   await server(combineConfig('development', config), config);
 }
 
-async function build(config, isConsoleOutput = true, cb) {
+async function build(config, cb) {
   const buildTask = require('./build');
   const stats = await buildTask(config, cb);
 
-  if (isConsoleOutput) {
-    const outputBuildInfo = require('./outputBuildInfo');
-
-    outputBuildInfo(stats);
-  }
+  return stats;
 }
 
 module.exports = {

packages/fusuma/src/webpack/index.js

@@ -1,20 +1,53 @@
 'use strict';
 
-const { table, getBorderCharacters } = require('table');
+const chalk = require('chalk');
 const humanSize = require('human-size');
 
 function outputBuildInfo(res) {
-  const output = [];
-  const options = {
-    border: getBorderCharacters('void'),
-  };
+  let totalSize = 0;
 
-  Object.entries(res.compilation.assets).forEach(([name, asset]) => {
-    output.push([name, humanSize(asset.size())]);
+  const assets = Object.entries(res.compilation.assets).map(([name, asset]) => {
+    const size = asset.size();
+
+    totalSize += size;
+
+    return {
+      name,
+      size,
+    };
+  });
+
+  assets.sort((a, b) => {
+    return b.size - a.size;
+  });
+
+  assets.forEach(({ name, size }) => {
+    let filename = name;
+    const fileSize = chalk.greenBright(humanSize(size));
+
+    if (name.includes('.js')) {
+      if (assets.some(({ name }) => name === `${filename}.gz`) || name.includes('.LICENSE')) {
+        filename = chalk.gray(name);
+      } else {
+        filename = chalk.yellow(name);
+      }
+    } else if (name.includes('.css')) {
+      if (assets.some(({ name }) => name === `${filename}.gz`)) {
+        filename = chalk.gray(name);
+      } else {
+        filename = chalk.blue(name);
+      }
+    } else if (name.includes('.html')) {
+      filename = chalk.redBright(name);
+    } else if (name.includes('.webp')) {
+      filename = chalk.magenta(name);
+    }
+
+    console.log(filename, fileSize);
   });
 
   console.log();
-  console.log(table([['name', 'size'], ...output], options));
+  console.log('Total:', chalk.greenBright(humanSize(totalSize)));
 }
 
 module.exports = outputBuildInfo;

packages/fusuma/src/webpack/outputBuildInfo.js

@@ -11,15 +11,15 @@ function prod() {
     mode: 'production',
     output: {
       filename: '[name].[chunkhash].bundle.js',
-      chunkFilename: '[name].[id].[chunkhash].bundle.js',
+      chunkFilename: '[name].[chunkhash].bundle.js',
     },
     module: {
       rules: [css('prod')],
     },
     plugins: [
       new MiniCssExtractPlugin({
         filename: '[name].[chunkhash].css',
-        chunkFilename: '[name].[id].[chunkhash].css',
+        chunkFilename: '[name].[chunkhash].css',
       }),
       // github pages doesn't support brotli
       new CompressionPlugin({

packages/fusuma/src/webpack/webpack.prod.config.js

@@ -6,7 +6,7 @@ meta:
   siteName: hiroppy.me
   sns: ['twitter']
 slide:
-  loop: true
+  loop: false
   sidebar: true
   targetBlank: true
   showIndex: true