perf: modify splutChunks options (#9)

type-challenges · Oct 23, 2023 · 45f4b64 · 45f4b64
1 parent ff0086f
commit 45f4b64
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -11,8 +11,8 @@
     "reset": "rm -rf node_modules",
     "setup": "yarn reset && yarn",
     "clean": "rm -rf dist",
-    "dev": "rspack serve --watch",
-    "build": "yarn clean && rspack build",
+    "dev": "rspack serve --watch --env development",
+    "build": "yarn clean && rspack build --env production",
     "lint": "eslint --fix --color --cache --quiet .",
     "prepare": "husky install"
   },

diff --git a/rspack.config.ts b/rspack.config.ts
@@ -1,103 +1,112 @@
 import path from 'path';
-import { type Configuration } from '@rspack/cli';
+import type { Configuration } from '@rspack/cli';
 import { ArcoDesignPlugin } from '@arco-plugins/unplugin-react';
 
-module.exports = {
-  context: __dirname,
-  entry: {
-    main: './src/main.tsx',
-  },
-  output: {
-    globalObject: 'self',
-    filename: '[name].[contenthash:8].bundle.js',
-    chunkFilename: '[name].[contenthash:8].bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-  builtins: {
-    html: [
-      {
-        template: './html/index.html',
-        minify: true,
-      },
-    ],
-  },
-  resolve: {
-    alias: {
-      '@config': path.resolve(__dirname, './config'),
-      '@src': path.resolve(__dirname, './src'),
+export default function createRspackConfig(env: {
+  production?: boolean;
+}): Configuration {
+  const { production } = env;
+  return {
+    context: __dirname,
+    entry: {
+      main: './src/main.tsx',
     },
-  },
-  plugins: [
-    new ArcoDesignPlugin({
-      theme: '@arco-design/theme-line',
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        resourceQuery: /url$/,
-        type: 'asset/resource',
-      },
-      {
-        resourceQuery: /raw$/,
-        type: 'asset/source',
+    output: {
+      filename: '[name].[contenthash:8].bundle.js',
+      chunkFilename: '[name].[contenthash:8].bundle.js',
+      cssChunkFilename: '[name].[contenthash:8].bundle.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+    builtins: {
+      html: [
+        {
+          template: './html/index.html',
+          minify: true,
+        },
+      ],
+    },
+    devtool: production ? false : 'source-map',
+    resolve: {
+      alias: {
+        '@config': path.resolve(__dirname, './config'),
+        '@src': path.resolve(__dirname, './src'),
       },
-      {
-        test: /\.less$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'less-loader',
-            options: {
-              lessOptions: {
-                javascriptEnabled: true,
+    },
+    plugins: [
+      new ArcoDesignPlugin({
+        theme: '@arco-design/theme-line',
+      }),
+    ],
+    module: {
+      rules: [
+        {
+          resourceQuery: /url$/,
+          type: 'asset/resource',
+        },
+        {
+          resourceQuery: /raw$/,
+          type: 'asset/source',
+        },
+        {
+          test: /\.less$/,
+          use: [
+            {
+              loader: 'style-loader',
+            },
+            {
+              loader: 'css-loader',
+            },
+            {
+              loader: 'less-loader',
+              options: {
+                lessOptions: {
+                  javascriptEnabled: true,
+                },
               },
             },
-          },
-        ],
-      },
-      {
-        test: /\.svg$/,
-        issuer: /\.[jt]sx?$/,
-        use: ['@svgr/webpack'],
-      },
-    ],
-  },
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
-      minChunks: 1,
-      minSize: 500 * 1024,
-      maxSize: 1000 * 1024,
-      maxAsyncRequests: 30,
-      maxInitialRequests: 30,
-      cacheGroups: {
-        common: {
-          chunks: 'all',
-          test: /[\\/]node_modules[\\/](react|react-dom|@arco-design[\\/]web-react|@monaco-editor\/react)/,
-          priority: 100,
-          name: 'common',
-          reuseExistingChunk: true,
+          ],
         },
-        vendors: {
-          chunks: 'all',
-          test: /[\\/]node_modules[\\/]/,
-          priority: 10,
-          name: 'vendors',
-          reuseExistingChunk: true,
+        {
+          test: /\.svg$/,
+          issuer: /\.[jt]sx?$/,
+          use: ['@svgr/webpack'],
         },
-        async: {
-          chunks: 'async',
-          priority: 1,
-          name: 'async',
-          reuseExistingChunk: true,
+      ],
+    },
+    optimization: {
+      splitChunks: {
+        minSize: 500 * 1024,
+        maxSize: 1000 * 1024,
+        cacheGroups: {
+          common0: {
+            chunks: 'all',
+            test: /[\\/]node_modules[\\/](react|react-dom|@arco-design[\\/]web-react)[\\/]/,
+            priority: 100,
+            name: 'common0',
+            reuseExistingChunk: true,
+          },
+          common1: {
+            chunks: 'all',
+            test: /[\\/]node_modules[\\/](react-syntax-highlighter|refractor)[\\/]/,
+            priority: 100,
+            name: 'common1',
+            reuseExistingChunk: true,
+          },
+          vendors: {
+            chunks: 'all',
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            name: 'vendors',
+            reuseExistingChunk: true,
+          },
+          async: {
+            chunks: 'async',
+            priority: 1,
+            name: 'async',
+            reuseExistingChunk: true,
+          },
         },
       },
     },
-  },
-} as Configuration;
+  };
+}