feat: minify and dropLogLevel (#119)

* feat: minify and dropLogLevel

* fix: test case

examples/basic-project/ice.config.ts

@@ -9,5 +9,7 @@ export default defineConfig({
     }
     return webpackConfig;
   },
+  dropLogLevel: 'warn',
+  minify: false,
   plugins: ['@ice/plugin-auth'],
 });

examples/basic-project/src/app.tsx

@@ -1,9 +1,13 @@
 import { defineAppConfig } from 'ice';
 
 if (process.env.ICE_RUNTIME_ERROR_BOUNDARY) {
-  console.log('__REMOVED__');
+  console.error('__REMOVED__');
 }
 
+console.log('__LOG__');
+console.warn('__WARN__');
+console.error('__ERROR__');
+
 export default defineAppConfig({
   app: {
     // @ts-expect-error loss tslib dependency

packages/build-webpack-config/package.json

@@ -23,6 +23,7 @@
     "event": "^1.0.0",
     "fast-glob": "^3.2.11",
     "less": "^4.1.2",
+    "lodash.merge": "^4.6.2",
     "magic-string": "^0.26.1",
     "postcss": "^8.4.7",
     "process": "^0.11.10",
@@ -33,6 +34,7 @@
   },
   "devDependencies": {
     "@ice/types": "^1.0.0",
+    "@types/lodash.merge": "^4.6.6",
     "build-scripts": "^2.0.0-16",
     "webpack": "^5.72.0",
     "webpack-dev-server": "^4.7.4"

packages/build-webpack-config/src/index.ts

@@ -3,6 +3,7 @@ import { createRequire } from 'module';
 import fg from 'fast-glob';
 import consola from 'consola';
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import merge from 'lodash.merge';
 import CssMinimizerPlugin from '@builder/pack/deps/css-minimizer-webpack-plugin/cjs.js';
 import TerserPlugin from '@builder/pack/deps/terser-webpack-plugin/cjs.js';
 import webpack, { type Configuration } from 'webpack';
@@ -63,6 +64,8 @@ const getWebpackConfig: GetWebpackConfig = ({ rootDir, config, commandArgs = {}
     configureWebpack,
     experimental,
     hash,
+    minify,
+    minimizerOptions = {},
   } = config;
 
   const dev = mode !== 'production';
@@ -96,7 +99,7 @@ const getWebpackConfig: GetWebpackConfig = ({ rootDir, config, commandArgs = {}
   // create plugins
   const webpackPlugins = getTransformPlugins(config).map((plugin) => createUnplugin(() => plugin).webpack());
 
-  const terserOptions: any = {
+  const terserOptions: any = merge({
     parse: {
       ecma: 8,
     },
@@ -119,9 +122,9 @@ const getWebpackConfig: GetWebpackConfig = ({ rootDir, config, commandArgs = {}
       // Fixes usage of Emoji and certain Regex
       ascii_only: true,
     },
-  };
+  }, minimizerOptions);
 
-  const minimizerOptions = {
+  const cssMinimizerOptions = {
     preset: [
       'default',
       {
@@ -167,15 +170,16 @@ const getWebpackConfig: GetWebpackConfig = ({ rootDir, config, commandArgs = {}
       ignored: watchIgnoredRegexp,
     },
     optimization: {
-      minimizer: [
+      minimizer: minify === false ? [] : [
         new TerserPlugin({
-          minify: TerserPlugin.esbuildMinify,
+          // keep same with compilation
+          minify: TerserPlugin.swcMinify,
           extractComments: false,
           terserOptions,
         }),
         new CssMinimizerPlugin({
           parallel: false,
-          minimizerOptions,
+          minimizerOptions: cssMinimizerOptions,
         }),
       ],
     },

packages/ice/src/plugins/config.ts

@@ -112,6 +112,39 @@ const userConfig = [
       }
     },
   },
+  {
+    name: 'minify',
+    validation: 'boolean',
+    setConfig: (config: Config, minify: UserConfig['minify']) => {
+      return mergeDefaultValue(config, 'minify', minify);
+    },
+  },
+  {
+    name: 'dropLogLevel',
+    validation: 'string',
+    setConfig: (config: Config, dropLogLevel: UserConfig['dropLogLevel']) => {
+      const levels = {
+        trace: 0,
+        debug: 1, // debug is alias for log
+        log: 1,
+        info: 2,
+        warn: 3,
+        error: 4,
+      };
+      const level = levels[dropLogLevel];
+      if (typeof level === 'number') {
+        return mergeDefaultValue(config, 'minimizerOptions', {
+          compress: {
+            pure_funcs: Object.keys(levels)
+              .filter((methodName) => levels[methodName] <= level)
+              .map(methodName => `console.${methodName}`),
+          },
+        });
+      } else {
+        consola.warn(`dropLogLevel only support [${Object.keys(levels).join(',')}]`);
+      }
+    },
+  },
   {
     name: 'compileDependencies',
     validation: 'array|boolean',

packages/types/package.json

@@ -26,11 +26,12 @@
   "bugs": "https://github.com/ice-lab/ice-next/issues",
   "homepage": "https://next.ice.work",
   "devDependencies": {
+    "@ice/route-manifest": "^1.0.0",
+    "@ice/runtime": "^1.0.0",
     "build-scripts": "^2.0.0-16",
     "esbuild": "^0.14.23",
-    "@ice/runtime": "^1.0.0",
-    "@ice/route-manifest": "^1.0.0",
     "react": "^17.0.2",
+    "terser-webpack-plugin": "^5.3.1",
     "unplugin": "^0.3.2",
     "webpack": "^5.72.0",
     "webpack-dev-server": "^4.7.4"

packages/types/src/config.ts

@@ -2,6 +2,7 @@ import type { RuleSetRule, Configuration } from 'webpack';
 import type { ProxyConfigArray, ProxyConfigArrayItem, ProxyConfigMap, Middleware } from 'webpack-dev-server';
 import type { UnpluginOptions } from 'unplugin';
 import type Server from 'webpack-dev-server';
+import type { MinimizerOptions, CustomOptions } from 'terser-webpack-plugin';
 
 interface ConfigurationCtx extends Omit<Config, 'webpack'> {
   supportedBrowsers: string[];
@@ -48,4 +49,8 @@ export interface Config {
   proxy?: ProxyConfigArrayItem | ProxyConfigMap | ProxyConfigArray | undefined;
 
   compileIncludes?: (string | RegExp)[];
+
+  minify?: boolean;
+
+  minimizerOptions?: MinimizerOptions<CustomOptions>;
 }

packages/types/src/userConfig.ts

@@ -18,5 +18,7 @@ export interface UserConfig {
     defineRoutes?: (defineRoute: DefineRouteFunction) => void;
   };
   plugins?: IPluginList;
+  dropLogLevel?: 'trace' | 'debug' | 'log' | 'info' | 'warn' | 'error';
+  minify?: boolean;
   compileDependencies?: boolean | string[] | RegExp[];
 }

tests/integration/basic-project.test.ts

@@ -20,8 +20,11 @@ describe(`build ${example}`, () => {
     page = res.page;
     browser = res.browser;
     expect(await page.$$text('h2')).toStrictEqual(['Home Page']);
-    const bundleContent = fs.readFileSync(path.join(__dirname, `../../examples/${example}/build/js/index.js`), 'utf-8');
+    const bundleContent = fs.readFileSync(path.join(__dirname, `../../examples/${example}/build/js/main.js`), 'utf-8');
     expect(bundleContent.includes('__REMOVED__')).toBe(false);
+    expect(bundleContent.includes('__LOG__')).toBe(false);
+    expect(bundleContent.includes('__WARN__')).toBe(false);
+    expect(bundleContent.includes('__ERROR__')).toBe(true);
   }, 120000);
 
   afterAll(async () => {