JS files not cached by browser when app is refreshed

[hussain-nz]

Converted our enterprise Craco Teams app into Rsbuild. Good experience so far.
However I expected Rsbuild to handle browser cache. i.e. when refreshing the app and JS file has not been changed, it should be loaded from file disk (200 file disk cache) or a response of 304 (Not Modified). I didn't see this behavior. It looks like Craco/CRA was achieving this by using the "ETag" header.

I've managed to replicate this behavior with the following rsbuild.config.ts:

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({ export default defineConfig({
  plugins: [pluginReact()],
  ...
  output: {
    filename: {
      // [contenthash:8] is required for Cache-Control header to work correctly
      js: '[name].[contenthash:8].js',
      css: '[name].[contenthash:8].css',
    },
  },
  server: { headers: { 'Cache-Control': 'public, max-age=31536000' } },
});

My question is, why isn't this standard behavior? I searched everywhere for documentation but couldn't find it. Did I miss something?

[chenjiahan]

Thanks for the feedback! The Rsbuild dev server should add ETag header to support caching.

@9aoy Can you take this? you can refer to web-infra-dev/modern.js#1678

[hussain-nz]

Thank you for the quick reply.
One of the "vendor" chunks is around 49Mb (Fluent UI + others). It takes 30-60 seconds to download. It's not feasible to work on this project if we have to download the chunk everytime we refresh :).

[chenjiahan]

This is indeed a problem that needs to be solved, we will support this soon

[9aoy]

@chenjiahan I fixed it in #2041, can you take a look?

[chenjiahan]

Released in v0.6.0

[hussain-nz]

I've updated to 0.6.0 and it has fixed most of my issues now (especially 304 caching and HMR), thank you!
I noticed though that it's a bit slower than version 0.5.9. Before it was taking around 0.7s to rebuild (rsbuild dev), and now it is taking around 3s. Screenshots below for timing. Any suggestions or is it expected?

This is my rsbuild.config.ts for both versions:

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    postcss: {
      postcssOptions: {
        plugins: [require('tailwindcss')('./tailwind.config.js'), require('autoprefixer')],
      },
    },
    rspack(config, { appendPlugins, addRules }) {
      addRules([
        { test: /\.css$/, use: ['postcss-loader'], type: 'css' },
      ]);
    },
  },
});

Rsbuild 0.5.9, dev:

Rsbuild 0.6.0, dev:

[hussain-nz]

This is the package.json:

// package.json
{
  "private": true,
  "engines": {
    "node": "^16"
  },
  "dependencies": {
    "@emotion/is-prop-valid": "0.8.8",
    "@fluentui/react-components": "9.46.5",
    "@fluentui/react-datepicker-compat": "0.3.6",
    "@fluentui/react-icons": "2.0.206",
    "@fluentui/react-search-preview": "0.1.12",
    "@fortawesome/fontawesome-pro": "6.4.0",
    "@fortawesome/fontawesome-svg-core": "6.4.0",
    "@fortawesome/pro-light-svg-icons": "6.4.0",
    "@fortawesome/pro-regular-svg-icons": "6.4.0",
    "@fortawesome/pro-solid-svg-icons": "6.4.0",
    "@fortawesome/react-fontawesome": "0.2.0",
    "@hookform/error-message": "0.0.5",
    "@marvelapp/react-ab-test": "3.1.0",
    "@microsoft/applicationinsights-react-js": "17.1.0",
    "@microsoft/applicationinsights-web": "3.1.0",
    "@microsoft/mgt-react": "3.1.1",
    "@microsoft/signalr": "7.0.5",
    "@microsoft/teams-js": "2.19.0",
    "@popperjs/core": "2.10.2",
    "@tanstack/react-table": "8.5.28",
    "@tiptap/extension-link": "2.0.0-beta.36",
    "@tiptap/extension-mention": "2.0.0-beta.95",
    "@tiptap/extension-placeholder": "2.0.0-beta.46",
    "@tiptap/extension-underline": "2.0.0-beta.22",
    "@tiptap/pm": "2.2.4",
    "@tiptap/react": "2.0.0-beta.106",
    "@tiptap/starter-kit": "2.0.0-beta.175",
    "antd": "4.8.2",
    "axios": "1.6.7",
    "classnames": "2.3.1",
    "date-fns": "2.16.1",
    "dompurify": "2.3.3",
    "framer-motion": "11.0.8",
    "history": "5.3.0",
    "html-to-text": "7.0.0",
    "i18next": "21.2.4",
    "i18next-http-backend": "1.3.2",
    "jwt-decode": "3.1.2",
    "linkify-html": "3.0.5",
    "locize-lastused": "3.0.13",
    "lottie-light-react": "2.4.0",
    "mixpanel-browser": "2.49.0",
    "mobx": "6.12.3",
    "mobx-react": "9.1.1",
    "mobx-utils": "6.0.8",
    "query-string": "7.1.2",
    "rc-collapse": "3.7.2",
    "rc-tabs": "11.7.2",
    "react": "18.2.0",
    "react-beautiful-dnd": "13.1.0",
    "react-calendly": "4.1.1",
    "react-countdown-circle-timer": "3.2.1",
    "react-device-detect": "1.17.0",
    "react-dom": "18.2.0",
    "react-dropzone": "11.2.4",
    "react-eager-import": "1.0.1",
    "react-easy-crop": "3.3.1",
    "react-hook-form": "6.11.0",
    "react-hook-form-v7": "npm:[email protected]",
    "react-i18next": "11.12.0",
    "react-infinite-scroll-component": "6.1.0",
    "react-linkify": "1.0.0-alpha",
    "react-masonry-component": "6.2.1",
    "react-mentions": "4.3.0",
    "react-router-dom": "6.22.1",
    "react-select": "5.7.3",
    "react-swipeable": "6.0.1",
    "react-use-intercom": "1.1.9",
    "react-window": "1.8.6",
    "react-window-infinite-loader": "1.0.7",
    "smoothscroll-polyfill": "0.4.4",
    "string.prototype.replaceall": "1.0.7",
    "tippy.js": "6.3.7",
    "use-debounce": "7.0.1",
    "uuid": "8.3.2",
    "web-vitals": "0.2.4"
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
    "@cfaester/enzyme-adapter-react-18": "0.7.1",
    "@fluentui/storybook": "0.6.22",
    "@rsbuild/core": "0.6.0",
    "@rsbuild/plugin-react": "0.6.0",
    "@rsbuild/plugin-svgr": "0.6.0",
    "@rsdoctor/rspack-plugin": "0.1.9",
    "@storybook/addon-actions": "6.4.18",
    "@storybook/addon-docs": "6.4.18",
    "@storybook/addon-essentials": "6.4.18",
    "@storybook/addon-links": "6.4.18",
    "@storybook/addon-postcss": "2.0.0",
    "@storybook/builder-webpack5": "6.4.18",
    "@storybook/manager-webpack5": "6.4.18",
    "@storybook/node-logger": "6.4.18",
    "@storybook/preset-create-react-app": "4.0.1",
    "@storybook/react": "6.4.18",
    "@swc/core": "1.4.8",
    "@swc/jest": "0.2.36",
    "@testing-library/jest-dom": "6.4.2",
    "@testing-library/react": "14.2.1",
    "@testing-library/user-event": "14.5.2",
    "@types/css-mediaquery": "0.1.1",
    "@types/enzyme": "3.10.8",
    "@types/jest": "29.5.12",
    "@types/mixpanel-browser": "2.49.0",
    "@types/node": "12.0.0",
    "@types/react": "18.2.74",
    "@types/react-beautiful-dnd": "13.0.0",
    "@types/react-dom": "18.2.24",
    "@types/react-mentions": "4.1.0",
    "@types/react-router-dom": "5.3.3",
    "@types/react-window": "1.8.3",
    "@types/react-window-infinite-loader": "1.0.3",
    "@types/url-parse": "1.4.4",
    "@typescript-eslint/eslint-plugin": "6.12.0",
    "@typescript-eslint/parser": "6.12.0",
    "autoprefixer": "10.4.16",
    "babel-loader": "8.1.0",
    "babel-preset-react-app": "10.0.1",
    "cross-env": "7.0.3",
    "css-mediaquery": "0.1.2",
    "dead-exports": "1.0.13",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.6",
    "eslint": "7.32.0",
    "eslint-config-prettier": "9.0.0",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-simple-import-sort": "10.0.0",
    "i18next-parser": "8.12.0",
    "jest": "29.7.0",
    "jest-canvas-mock": "2.3.1",
    "jest-fetch-mock": "3.0.3",
    "jest-junit": "12.3.0",
    "jest-watch-typeahead": "0.6.5",
    "locize-cli": "7.15.2",
    "postcss": "8.4.31",
    "postcss-loader": "6.2.0",
    "prettier": "2.8.0",
    "serve": "14.2.1",
    "source-map-explorer": "2.5.0",
    "speed-measure-webpack-plugin": "1.5.0",
    "style-loader": "3.3.1",
    "tailwindcss": "3.3.5",
    "ts-jest": "27.1.3",
    "typescript": "4.8.4",
    "webpack": "5.90.3",
    "webpack-bundle-analyzer": "4.9.0",
    "yarn": "1.22.21"
  },
  "scripts": {
    "start": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview",
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "Edge >= 12"
    ]
  }
}

[chenjiahan]

This might be a performance regression of Rspack new tree shaking, you can open a new issue in the Rspack repo