Skip to main content

创建生产版本

npm run build 创建一个 build 目录，其中包含你的应用的生产版本。build/static 目录内将是你的 JavaScript 和 CSS 文件。build/static 中的每个文件名都将包含文件内容的唯一哈希值。文件名中的此散列启用 长期缓存技术。

¥npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents. This hash in the file name enables long term caching techniques.

在运行新创建的 Create React App 应用的生产构建时，会生成许多 .js 文件（称为块）并将其放置在 build/static/js 目录中：

¥When running a production build of freshly created Create React App application, there are a number of .js files (called chunks) that are generated and placed in the build/static/js directory:

main.[hash].chunk.js

  • 这是你的应用代码。App.js 等

    ¥This is your application code. App.js, etc.

[number].[hash].chunk.js

  • 这些文件可以是库代码或 代码拆分块。库代码包括你从 node_modules 中导入的模块。拆分库和应用代码的潜在优势之一是使 长期缓存技术 能够提高应用加载性能。由于库代码的更改频率低于实际应用代码，浏览器将能够单独缓存它们，并且不会在每次应用代码更改时重新下载它们。

    ¥These files can either be vendor code, or code splitting chunks. Vendor code includes modules that you've imported from within node_modules. One of the potential advantages with splitting your vendor and application code is to enable long term caching techniques to improve application loading performance. Since vendor code tends to change less often than the actual application code, the browser will be able to cache them separately, and won't re-download them each time the app code changes.

runtime-main.[hash].js

  • 这是一小块 网络包运行时 逻辑，用于加载和运行你的应用。默认情况下，此内容将嵌入到你的 build/index.html 文件中，以节省额外的网络请求。你可以通过在我们的 高级配置 中记录指定 INLINE_RUNTIME_CHUNK=false 来选择退出，这将加载该块而不是将其嵌入到你的 index.html 中。

    ¥This is a small chunk of webpack runtime logic which is used to load and run your application. The contents of this will be embedded in your build/index.html file by default to save an additional network request. You can opt out of this by specifying INLINE_RUNTIME_CHUNK=false as documented in our advanced configuration, which will load this chunk instead of embedding it in your index.html.

如果你使用 代码拆分 来拆分你的应用，这也会在 build/static 文件夹中创建额外的块。

¥If you're using code splitting to split up your application, this will create additional chunks in the build/static folder as well.

静态文件缓存​

¥Static File Caching

build/static 目录中的每个文件都会在文件名后附加一个唯一的哈希值，该哈希值是根据文件内容生成的，这允许你使用 激进的缓存技术 避免浏览器在文件内容未更改时重新下载你的资源。如果文件的内容在后续构建中发生变化，则生成的文件名哈希将不同。

¥Each file inside of the build/static directory will have a unique hash appended to the filename that is generated based on the contents of the file, which allows you to use aggressive caching techniques to avoid the browser re-downloading your assets if the file contents haven't changed. If the contents of a file changes in a subsequent build, the filename hash that is generated will be different.

为了向你的用户提供最佳性能，最佳做法是为 index.html 以及 build/static 中的文件指定 Cache-Control 标头。此标头允许你控制浏览器和 CDN 缓存你的静态资源的时间长度。如果你不熟悉 Cache-Control 的功能，请参阅 本文 以获得精彩介绍。

¥To deliver the best performance to your users, it's best practice to specify a Cache-Control header for index.html, as well as the files within build/static. This header allows you to control the length of time that the browser as well as CDNs will cache your static assets. If you aren't familiar with what Cache-Control does, see this article for a great introduction.

将 Cache-Control: max-age=31536000 用于你的 build/static 资源，将 Cache-Control: no-cache 用于其他一切是一个安全有效的起点，可确保你的用户的浏览器始终检查更新的 index.html 文件，并将所有 build/static 文件缓存一年。请注意，你可以安全地使用 build/static 上的一年到期时间，因为文件内容哈希已嵌入到文件名中。

¥Using Cache-Control: max-age=31536000 for your build/static assets, and Cache-Control: no-cache for everything else is a safe and effective starting point that ensures your user's browser will always check for an updated index.html file, and will cache all of the build/static files for one year. Note that you can use the one year expiration on build/static safely because the file contents hash is embedded into the filename.

剖析​

¥Profiling

ReactDOM 在 v16.5+ 的开发模式下自动支持分析，但由于分析会增加一些小的额外开销，因此可以选择加入生产模式。你可以使用 --profile 标志选择加入。使用 npm run build -- --profile 或 yarn build --profile 在生产构建中启用分析。有关使用 React DevTools 进行分析的详细信息，请参阅 React 文档。

¥ReactDOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. You can opt-in by using the --profile flag. Use npm run build -- --profile or yarn build --profile to enable profiling in the production build. See the React docs for details about profiling using the React DevTools.