feat(entries): support prettify or minify html

Author: Codpoe

packages/entries/package.json

@@ -31,8 +31,10 @@
   "devDependencies": {
     "@types/connect-history-api-fallback": "^1.3.5",
     "@types/fs-extra": "^9.0.13",
+    "@types/html-minifier-terser": "^6.1.0",
     "@types/lodash": "^4.14.182",
     "@types/micromatch": "^4.0.2",
+    "@types/prettier": "^2.6.3",
     "@types/resolve": "^1.20.2"
   },
   "dependencies": {
@@ -41,9 +43,11 @@
     "fast-glob": "^3.2.11",
     "fs-extra": "^10.1.0",
     "gray-matter": "^4.0.3",
+    "html-minifier-terser": "7.0.0-beta.0",
     "jest-docblock": "^28.0.2",
     "lodash": "^4.17.21",
     "micromatch": "^4.0.5",
+    "prettier": "^2.6.2",
     "resolve": "^1.22.0",
     "upath": "^2.0.1"
   }

packages/entries/src/html.ts

@@ -9,7 +9,9 @@ import {
   ViteDevServer,
 } from 'vite';
 import history, { Rewrite } from 'connect-history-api-fallback';
-import { Entry } from './types';
+import { format } from 'prettier';
+import { minify } from 'html-minifier-terser';
+import { Entry, UserConfig } from './types';
 import {
   BODY_INJECT_RE,
   BODY_PREPEND_INJECT_RE,
@@ -249,3 +251,40 @@ export function transformHtml(html: string, entry: Entry): string {
 
   return html;
 }
+
+export function prettifyHtml(
+  html: string,
+  options: NonNullable<UserConfig['prettifyHtml']>
+) {
+  if (options === false) {
+    return html;
+  }
+  return format(html, {
+    parser: 'html',
+    ...(options === true ? {} : options),
+  });
+}
+
+export async function minifyHtml(
+  html: string,
+  options: NonNullable<UserConfig['minifyHtml']>
+) {
+  if (options === false) {
+    return html;
+  }
+  return minify(
+    html,
+    options === true
+      ? {
+          collapseWhitespace: true,
+          keepClosingSlash: true,
+          removeComments: true,
+          removeRedundantAttributes: true,
+          removeScriptTypeAttributes: true,
+          removeStyleLinkTypeAttributes: true,
+          useShortDoctype: true,
+          minifyCSS: true,
+        }
+      : options
+  );
+}

packages/entries/src/index.ts

@@ -6,7 +6,12 @@ import mm from 'micromatch';
 import { Entry, UserConfig } from './types';
 import { flattenPath, normalizeRoutePath, toArray } from './utils';
 import { DEFAULT_ENTRY_MODULE_ID, DEFAULT_HTML_PATH } from './constants';
-import { spaFallbackMiddleware, transformHtml } from './html';
+import {
+  minifyHtml,
+  prettifyHtml,
+  spaFallbackMiddleware,
+  transformHtml,
+} from './html';
 
 export * from './types';
 
@@ -100,7 +105,12 @@ function ensureLinkHtmlPath(root: string, entry: Entry) {
 }
 
 export function conventionalEntries(userConfig: UserConfig = {}): Plugin[] {
-  const { pattern = '**/main.{js,jsx,ts,tsx}', basePath = '/' } = userConfig;
+  const {
+    pattern = '**/main.{js,jsx,ts,tsx}',
+    basePath = '/',
+    prettifyHtml: userPrettifyHtml = false,
+    minifyHtml: userMinifyHtml = true,
+  } = userConfig;
 
   let src: string;
   let entries: Entry[];
@@ -216,30 +226,39 @@ if (rootEl) {
           return code;
         }
       },
-      // expose entries
-      getEntries() {
-        return entries;
+      api: {
+        // expose entries
+        getEntries() {
+          return entries;
+        },
       },
-    } as Plugin,
-    // vite will emit html with fileName which is relative(root, id),
-    // for example: 'dist/node_modules/.conventional-entries/index.html'.
-    // In order to have a clearer directory structure, we should rewrite html fileName here.
-    // see also: https://github.com/vitejs/vite/blob/1878f465d26d1c61a29ede72882d54d7e95c1042/packages/vite/src/node/plugins/html.ts#L672
+    },
     {
-      name: 'vite-plugin-conventional-entries:transform-html-path',
+      name: 'vite-plugin-conventional-entries:html',
       enforce: 'post',
-      generateBundle(_options, bundle) {
-        Object.values(bundle).forEach(chunkOrAsset => {
+      async generateBundle(_options, bundle) {
+        for (const chunk of Object.values(bundle)) {
           if (
-            chunkOrAsset.type === 'asset' &&
-            chunkOrAsset.fileName.endsWith('.html')
+            chunk.type === 'asset' &&
+            chunk.fileName.endsWith('.html') &&
+            typeof chunk.source === 'string'
           ) {
-            chunkOrAsset.fileName = chunkOrAsset.fileName.replace(
+            // vite will emit html with fileName which is relative(root, id),
+            // for example: 'dist/node_modules/.conventional-entries/index.html'.
+            // In order to have a clearer directory structure, we should rewrite html fileName here.
+            // see also: https://github.com/vitejs/vite/blob/1878f465d26d1c61a29ede72882d54d7e95c1042/packages/vite/src/node/plugins/html.ts#L672
+            chunk.fileName = chunk.fileName.replace(
               'node_modules/.conventional-entries/',
               ''
             );
+
+            if (userPrettifyHtml) {
+              chunk.source = prettifyHtml(chunk.source, userPrettifyHtml);
+            } else if (userMinifyHtml) {
+              chunk.source = await minifyHtml(chunk.source, userMinifyHtml);
+            }
           }
-        });
+        }
       },
     },
   ];

packages/entries/src/types.ts

@@ -1,3 +1,6 @@
+import { Options as PrettierOptions } from 'prettier';
+import { Options as HtmlMinifierOptions } from 'html-minifier-terser';
+
 export interface Entry {
   entryPath: string;
   routePath: string;
@@ -21,4 +24,12 @@ export interface UserConfig {
    * @default '/'
    */
   basePath?: string;
+  /**
+   * use prettier to format html
+   */
+  prettifyHtml?: boolean | PrettierOptions;
+  /**
+   * minify html
+   */
+  minifyHtml?: boolean | HtmlMinifierOptions;
 }