在单个HTML页面引入React构建产物遇问题求解决方案

Hey there, let's work through your React app problems one by one to get things running smoothly!

1. Occasional 404 Errors for main.js #

There are a few common reasons this might happen:

• Wrong file path: Double-check if your deployed main.js is actually at http://reactbuild.localhost.com/public/build/main.js. Create React App's build folder holds all production-ready files—if you uploaded the entire build folder to your server, the correct path is likely http://reactbuild.localhost.com/build/main.js (no extra public in the URL).
• Hashed filenames: By default, Create React App adds unique hashes to build filenames (like main.abc123.js) to avoid caching issues. If you're hardcoding main.js in your HTML, you'll get 404s every time you rebuild the app. Instead, use the auto-generated index.html from the build folder—it already references the correct hashed filenames.
• Browser caching: Old cached requests might be pointing to a version of main.js that no longer exists. Try clearing your browser cache, or configure your server to set proper cache-control headers for build files to prevent long-term caching.

2. Service Worker Registration Error #

This error is crystal clear: Service Workers can only be registered on secure origins (HTTPS) or localhost (for local development). Your subdomain uses http://, which isn't a secure origin, so the browser blocks the registration.

Here’s how to fix it:

• If you don’t need Service Workers, disable them. For Create React App, you can either use a non-PWA template, set INLINE_RUNTIME_CHUNK=false in your build command, or remove the service worker registration code from your index.js/index.tsx file.
• If you do need Service Workers, set up HTTPS for your subdomain. Even for local testing, you can use tools to generate self-signed certificates to enable HTTPS.

3. Do You Need to Run npm start? #

Absolutely not! npm start is for local development—it spins up a dev server with hot reloading so you can test changes in real-time. Since you’ve already built your app with npm run build and deployed the build folder to your subdomain, you don’t need to keep npm start running. Save that command for when you’re actively writing and debugging code locally.

4. Correct Way to Include React in a Single-Page App #

For production, the best practice is to let your build tool (like Webpack, which Create React App uses under the hood) bundle React and ReactDOM directly into your app’s code. Here’s why:

• No duplicate code: If you include React via external links and also have it bundled in your main.js, you’ll end up with two conflicting copies of React, leading to weird bugs.
• Better performance: Build tools handle optimizations like tree-shaking (removing unused code), minification, and code splitting to make your app smaller and load faster.

If you’re working on a non-build setup (not recommended for production), you can use React’s official production-ready UMD builds via a CDN—just make sure you use the minified production versions. And never use babel-standalone in production: it compiles JSX directly in the browser, which is slow and unnecessary. Instead, compile your JSX during the build process (Create React App does this automatically when you run npm run build).

内容的提问来源于stack exchange，提问作者truesource