improve build output and include file size

vitejs · May 5, 2020 · 288e68e · 288e68e
1 parent 4808f41
commit 288e68e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 18 deletions.
diff --git a/bin/vite.js b/bin/vite.js
@@ -12,7 +12,7 @@ Object.keys(argv).forEach((key) => {
 })
 
 if (argv._[0] === 'build') {
-  console.log(chalk.yellow('Building for production...'))
+  console.log('Building for production...')
   require('../dist')
     .build({
       ...argv,

diff --git a/src/node/build.ts b/src/node/build.ts
@@ -80,6 +80,20 @@ export interface BuildResult {
   assets: RollupOutput['output']
 }
 
+const enum WriteType {
+  JS,
+  CSS,
+  ASSET,
+  HTML
+}
+
+const writeColors = {
+  [WriteType.JS]: chalk.cyan,
+  [WriteType.CSS]: chalk.magenta,
+  [WriteType.ASSET]: chalk.green,
+  [WriteType.HTML]: chalk.blue
+}
+
 /**
  * Bundles the app for production.
  * Returns a Promise containing the build result.
@@ -111,6 +125,23 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
   const cssFileName = 'style.css'
   const resolvedAssetsPath = path.join(outDir, assetsDir)
 
+  const cwd = process.cwd()
+  const writeFile = async (
+    filepath: string,
+    content: string | Uint8Array,
+    type: WriteType
+  ) => {
+    await fs.ensureDir(path.dirname(filepath))
+    await fs.writeFile(filepath, content)
+    if (!silent) {
+      console.log(
+        `${chalk.gray(`[write]`)} ${writeColors[type](
+          path.relative(cwd, filepath)
+        )} ${(content.length / 1024).toFixed(2)}kb`
+      )
+    }
+  }
+
   let indexContent: string | null = null
   try {
     indexContent = await fs.readFile(indexPath, 'utf-8')
@@ -225,34 +256,24 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
       // write chunk
       if (write) {
         const filepath = path.join(resolvedAssetsPath, chunk.fileName)
-        !silent &&
-          console.log(
-            `write ${chalk.cyan(path.relative(process.cwd(), filepath))}`
-          )
-        await fs.ensureDir(path.dirname(filepath))
-        await fs.writeFile(filepath, chunk.code)
+        await writeFile(filepath, chunk.code, WriteType.JS)
       }
     } else if (emitAssets && write) {
       // write asset
       const filepath = path.join(resolvedAssetsPath, chunk.fileName)
-      !silent &&
-        console.log(
-          `write ${chalk.magenta(path.relative(process.cwd(), filepath))}`
-        )
-      await fs.ensureDir(path.dirname(filepath))
-      await fs.writeFile(filepath, chunk.source)
+      await writeFile(
+        filepath,
+        chunk.source,
+        chunk.fileName.endsWith('.css') ? WriteType.CSS : WriteType.ASSET
+      )
     }
   }
 
   if (write) {
     // write html
     if (generatedIndex) {
       const indexOutPath = path.join(outDir, 'index.html')
-      !silent &&
-        console.log(
-          `write ${chalk.green(path.relative(process.cwd(), indexOutPath))}`
-        )
-      await fs.writeFile(indexOutPath, generatedIndex)
+      await writeFile(indexOutPath, generatedIndex, WriteType.HTML)
     }
   }