improve the optimization on production using TerserPlugin.swcMinify

htdangkhoa · Jan 24, 2022 · b2592b6 · b2592b6
1 parent 0d36711
commit b2592b6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 23 deletions.
diff --git a/.swcrc b/.swcrc
@@ -2,12 +2,16 @@
   "jsc": {
     "parser": {
       "syntax": "ecmascript",
-      "jsx": true
+      "jsx": true,
+      "dynamicImport": true
     },
     "transform": {
       "react": {
         "runtime": "automatic"
       }
     }
+  },
+  "module": {
+    "type": "commonjs"
   }
 }
diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js
@@ -140,8 +140,12 @@ const getOptimization = () => {
       new TerserPlugin({
         parallel: true,
         extractComments: false,
+        minify: TerserPlugin.swcMinify,
         terserOptions: {
-          compress: { drop_console: true },
+          compress: {
+            drop_console: true,
+          },
+          mangle: true,
         },
       }),
     ],
@@ -150,6 +154,8 @@ const getOptimization = () => {
 
 const swcConfig = JSON.parse(fs.readFileSync(getPath('.swcrc'), 'utf-8'));
 swcConfig.jsc.transform.react.development = _isDev;
+swcConfig.sourceMaps = _isDev;
+swcConfig.minify = !_isDev;
 
 exports.baseConfig = (isWeb) => ({
   mode: _isDev ? 'development' : 'production',
@@ -238,4 +244,8 @@ exports.baseConfig = (isWeb) => ({
     alias: getAlias(),
   },
   optimization: getOptimization(),
+  // performance: {
+  //   maxEntrypointSize: 512000,
+  //   maxAssetSize: 512000,
+  // },
 });
diff --git a/webpack/webpack.config.client.js b/webpack/webpack.config.client.js
@@ -4,7 +4,6 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const webpack = require('webpack');
 const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { baseConfig, getPath, isDev, mergeBaseEntry } = require('./webpack.config.base');
 
@@ -73,29 +72,11 @@ const getPlugins = () => {
 };
 
 const getOptimization = () => {
-  if (!_isDev) return undefined;
+  if (_isDev) return undefined;
 
   return {
     minimize: !_isDev,
     minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          parse: {
-            ecma: 8,
-          },
-          compress: { drop_console: true },
-          mangle: {
-            safari10: true,
-          },
-          keep_classnames: !_isDev,
-          keep_fnames: !_isDev,
-          output: {
-            ecma: 5,
-            comments: false,
-            ascii_only: true,
-          },
-        },
-      }),
       new CssMinimizerPlugin({
         minimizerOptions: {
           preset: [
@@ -139,5 +120,5 @@ module.exports = merge(config, {
   },
   plugins: getPlugins(),
   optimization: getOptimization(),
-  stats: _isDev ? 'none' : { children: true },
+  stats: _isDev ? 'none' : { children: true, errorDetails: true },
 });