Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Hello, I’m Shanyue.

This is my front end engineering knowledge card collection 2/36 published in Nuggets

There are two best practices for configuring HTTP caching:

  1. File path with hash value: strong cache for one year. Because when the contents of the file change, a URL with a new hash value is generated. The front end will initiate a request for a new URL. Configure the response headerCache-Control: public,max-age=31536000,immutable
  2. File path without hash value: Negotiated cache. Most of thempublicThe file. Configure the response headerCache-Control: no-cache 与 etag/last-modified

However, when dealing with the permanent cache, remember not to pack it into a large bundle.js. In this case, the change of one line of business code will lead to the invalidity of the permanent cache of the whole project.

  1. webpack-runtime: In applicationwebpackThe version of the more stable, separated, to ensure long-term permanent cache
  2. react/react-dom: reactAre also updated less frequently
  3. vendor: Common third-party modules are packaged together, such aslodash.classnamesAlmost every page is referenced, but they are updated more frequently. In addition to the low frequency use of the third party module do not call
  4. pageA: A routes the page. If A component of the page changes, its cache will be invalidated
  5. pageB: B Route page
  6. echarts: Uncommonly used and oversized third-party modules are packaged separately
  7. mathjax: Uncommonly used and oversized third-party modules are packaged separately
  8. jspdf: Uncommonly used and oversized third-party modules are packaged separately