feat(utils): replace zlib by lz4

web-infra-dev · Jul 22, 2024 · 6ecd927 · 6ecd927
1 parent 12b009e
commit 6ecd927
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 25 deletions.
diff --git a/packages/client/rsbuild.config.ts b/packages/client/rsbuild.config.ts
@@ -49,6 +49,9 @@ export default defineConfig(({ env }) => {
     },
 
     output: {
+      externals: {
+        lz4: 'window.lz4',
+      },
       distPath: {
         root: path.basename(DistPath),
         js: 'resource/js',
@@ -67,6 +70,25 @@ export default defineConfig(({ env }) => {
         css: false,
       },
       legalComments: 'none',
+      minify: false,
+    },
+    html: {
+      title: 'Rsdoctor',
+      tags: [
+        {
+          tag: 'script',
+          attrs: {
+            src: 'https://cdn.jsdelivr.net/npm/[email protected]/build/lz4.min.js',
+          },
+          head: false,
+          publicPath: false,
+        },
+        {
+          tag: 'script',
+          children: "window.lz4 = require('lz4')",
+          head: false,
+        },
+      ],
     },
 
     performance: {
@@ -136,10 +158,6 @@ export default defineConfig(({ env }) => {
       },
     },
 
-    html: {
-      title: 'Rsdoctor',
-    },
-
     server: {
       port: PortForWeb,
       historyApiFallback: true,

diff --git a/packages/components/src/utils/hooks.ts b/packages/components/src/utils/hooks.ts
@@ -12,6 +12,22 @@ import { setLocaleToStorage } from './storage';
 
 const route = Client.RsdoctorClientRoutes.RuleIndex;
 
+export function decompressText(input: string): string {
+  try {
+    // @ts-ignore
+    if (!window.lz4) return '';
+    const compressedBlock = Buffer.from(input);
+    let uncompressedBlock = Buffer.alloc(input.length * 10);
+    // @ts-ignore
+    const n = window.lz4.decodeBlock(compressedBlock, uncompressedBlock);
+    uncompressedBlock = uncompressedBlock.slice(0, n);
+    return uncompressedBlock.toString('utf-8');
+  } catch (e) {
+    console.log(e);
+    return '';
+  }
+}
+
 export const useI18n: typeof useTranslation = () => {
   const { i18n, ...rest } = useTranslation();
 
@@ -39,7 +55,9 @@ export function useRuleIndexNavigate(code: string, link?: string | undefined) {
   }
 
   return () => {
-    navigate(`${route}?${Rule.RsdoctorRuleClientConstant.UrlQueryForErrorCode}=${code}`);
+    navigate(
+      `${route}?${Rule.RsdoctorRuleClientConstant.UrlQueryForErrorCode}=${code}`,
+    );
   };
 }
 
@@ -55,7 +73,9 @@ export function useLoading(defaultLoading = false) {
   return {
     loading,
     setLoading,
-    async withLoading(func: (...args: unknown[]) => Promise<unknown> | unknown) {
+    async withLoading(
+      func: (...args: unknown[]) => Promise<unknown> | unknown,
+    ) {
       try {
         setLoading(true);
         await func();
@@ -75,7 +95,10 @@ export function useHashByManifest(manifest: Manifest.RsdoctorManifest) {
 }
 
 export function useCloudManifestUrlByManifest(
-  manifest: Manifest.RsdoctorManifest | Manifest.RsdoctorManifestWithShardingFiles | void,
+  manifest:
+    | Manifest.RsdoctorManifest
+    | Manifest.RsdoctorManifestWithShardingFiles
+    | void,
 ) {
   if (!manifest) return;
 }
@@ -94,14 +117,24 @@ function ensurePlainObject<T extends object>(value: T, dfts: T): T {
 export function useChunkGraphByManifest(manifest: Manifest.RsdoctorManifest) {
   const prev = manifest.data.chunkGraph;
   if (typeof prev === 'string') {
-    manifest.data.chunkGraph = JSON.parse(Algorithm.decompressText(prev as string));
+    manifest.data.chunkGraph = JSON.parse(
+      Algorithm.decompressText(prev as string),
+    );
   }
 
-  return ensurePlainObject(manifest.data.chunkGraph, { assets: [], chunks: [], entrypoints: [] });
+  return ensurePlainObject(manifest.data.chunkGraph, {
+    assets: [],
+    chunks: [],
+    entrypoints: [],
+  });
 }
 
-export function useConfigOutputFileNameByManifest(manifest: Manifest.RsdoctorManifest) {
-  if (typeof manifest.data.configs?.[0]?.config?.output?.filename === 'string') {
+export function useConfigOutputFileNameByManifest(
+  manifest: Manifest.RsdoctorManifest,
+) {
+  if (
+    typeof manifest.data.configs?.[0]?.config?.output?.filename === 'string'
+  ) {
     return manifest.data.configs?.[0]?.config?.output?.filename;
   }
   return '';
@@ -110,7 +143,9 @@ export function useConfigOutputFileNameByManifest(manifest: Manifest.RsdoctorMan
 export function useModuleGraphByManifest(manifest: Manifest.RsdoctorManifest) {
   const prev = manifest.data.moduleGraph;
   if (typeof prev === 'string') {
-    manifest.data.moduleGraph = JSON.parse(Algorithm.decompressText(prev as string));
+    manifest.data.moduleGraph = JSON.parse(
+      Algorithm.decompressText(prev as string),
+    );
   }
 
   return ensurePlainObject(manifest.data.moduleGraph, {
@@ -142,7 +177,9 @@ export function useModuleGraph(moduleGraph: SDK.ModuleGraphData) {
 export function usePackageGraphByManifest(manifest: Manifest.RsdoctorManifest) {
   const prev = manifest.data.packageGraph;
   if (typeof prev === 'string') {
-    manifest.data.packageGraph = JSON.parse(Algorithm.decompressText(prev as string));
+    manifest.data.packageGraph = JSON.parse(
+      Algorithm.decompressText(prev as string),
+    );
   }
   return ensurePlainObject(manifest.data.packageGraph, {
     packages: [],
@@ -178,39 +215,52 @@ export function useDuplicatePackagesByManifest(
   return useDuplicatePackagesByErrors(alerts);
 }
 
-export function useCompileAlertsByErrors(errors: Manifest.RsdoctorManifestData['errors']) {
+export function useCompileAlertsByErrors(
+  errors: Manifest.RsdoctorManifestData['errors'],
+) {
   if (isArray(errors)) {
     return errors.filter(
-      (e) => e.category === Rule.RuleMessageCategory.Compile && e.code !== Rule.RuleMessageCodeEnumerated.Overlay,
+      (e) =>
+        e.category === Rule.RuleMessageCategory.Compile &&
+        e.code !== Rule.RuleMessageCodeEnumerated.Overlay,
     );
   }
   return [];
 }
 
-export function useBundleAlertsByErrors(errors: Manifest.RsdoctorManifestData['errors']) {
+export function useBundleAlertsByErrors(
+  errors: Manifest.RsdoctorManifestData['errors'],
+) {
   if (isArray(errors)) {
     return errors.filter(
-      (e) => e.category === Rule.RuleMessageCategory.Bundle && e.code !== Rule.RuleMessageCodeEnumerated.Overlay,
+      (e) =>
+        e.category === Rule.RuleMessageCategory.Bundle &&
+        e.code !== Rule.RuleMessageCodeEnumerated.Overlay,
     );
   }
   return [];
 }
 
-export function useDuplicatePackagesByErrors(errors: Manifest.RsdoctorManifestData['errors']) {
+export function useDuplicatePackagesByErrors(
+  errors: Manifest.RsdoctorManifestData['errors'],
+) {
   return useBundleAlertsByErrors(errors).filter(
     (e) => e.code === Rule.RuleErrorMap.E1001.code,
   ) as Rule.PackageRelationDiffRuleStoreData[];
 }
 
 export function useWebpackConfigurationByConfigs(configs: SDK.ConfigData = []) {
   if (isArray(configs)) {
-    return configs.find((e) => (e.name === 'webpack' ||  e.name === 'rspack'));
+    return configs.find((e) => e.name === 'webpack' || e.name === 'rspack');
   }
   return null;
 }
 
 export function useDetectIfCloudIdeEnv() {
-  if (window.location.protocol === 'https:' && window.location.href.indexOf('ide-proxy') > 0) {
+  if (
+    window.location.protocol === 'https:' &&
+    window.location.href.indexOf('ide-proxy') > 0
+  ) {
     return true;
   }
   return false;
@@ -226,7 +276,6 @@ export function useWindowWidth() {
       window.removeEventListener('resize', handleResize);
     };
   }, []);
-  
+
   return windowWidth;
 }
-
diff --git a/packages/utils/package.json b/packages/utils/package.json
@@ -89,6 +89,7 @@
     "json-stream-stringify": "3.0.1",
     "lines-and-columns": "2.0.4",
     "lodash": "^4.17.21",
+    "lz4": "^0.6.5",
     "rslog": "^1.2.0",
     "strip-ansi": "^6.0.1"
   },
@@ -99,6 +100,7 @@
     "@types/envinfo": "7.8.4",
     "@types/fs-extra": "^11.0.2",
     "@types/lodash": "^4.17.0",
+    "@types/lz4": "^0.6.4",
     "@types/node": "^16",
     "tslib": "2.4.1",
     "typescript": "^5.2.2"

diff --git a/packages/utils/src/common/algorithm.ts b/packages/utils/src/common/algorithm.ts
@@ -1,5 +1,5 @@
-import { deflateSync, inflateSync } from 'zlib';
 import { Buffer } from 'buffer';
+import lz4 from 'lz4';
 
 export function mergeIntervals(intervals: [number, number][]) {
   // Sort from small to large
@@ -25,11 +25,16 @@ export function mergeIntervals(intervals: [number, number][]) {
 }
 
 export function compressText(input: string): string {
-  return deflateSync(input).toString('base64');
+  // LZ4 can only work on Buffers
+  const data = Buffer.from(input);
+  const output = lz4.encode(data);
+  return output.toString('base64');
 }
 
 export function decompressText(input: string): string {
-  return inflateSync(Buffer.from(input, 'base64')).toString();
+  const inputB = Buffer.from(input, 'utf8');
+  const uncompressed = lz4.decode(inputB);
+  return uncompressed.toString('utf-8');
 }
 
 export function random(min: number, max: number) {