There is an occasional white screen problem on the mobile page, which can be brushed strongly by cdn. - Codes Helper - Programming Question Answer

There is an occasional white screen problem on the mobile page, which can be brushed strongly by cdn.

problem description

some of our mobile projects are based on vue-cli and react, but we feel that this problem has nothing to do with the framework, because what we have in common is that vendor.js app.js and other asynchronous chunk.js are referenced by cdn address when they are launched, and cdn will be sent back to our server. Every time we launch, that is, when there is a change in vendor or app.js, there will be a wave of customer feedback white screen, but it is difficult to reproduce. We can solve the problem by browsing cdn"s vendor resources, but the cause of the problem has not been found out yet. I wonder if you have encountered similar problems and tried some solutions

.

the environmental background of the problems and what methods you have tried

tried scheme:
1. Strong cdn vendor is equivalent to forcing cache updates
2. If the vendor package is no longer extracted during the build, the app package will become larger, which is not a good idea and will not solve the fundamental problem

Cdn webpack javascript server cache

Jan.17,2022

do you have hash for static resources?

sounds like there is something wrong with the cache setting. The output file may be different each time, but the original file is not preheated in CDN, but the original file is no longer there, so the white screen (404).

I have encountered similar problems these two days, and I feel similar to you.

In the

scenario, the vendor package of our project is generated using dllPlugin of webpack, and then react, react-dom and other packages are packaged into vendor, and then the version descriptions of these packages in package.json are all expressed by ^ . Therefore, every time yarn is installed, yarn will not continue to pull the package if it meets the requirements of the version description in package.json . If not, it will be reinstalled. Then the local version of react-dom installed by colleague An is 16.6.0 , and the version of react-dom installed locally by colleague B is 16.4.2 , and so on, many versions of other packages may not be consistent.

then, during the release process, both colleagues An and colleague B compiled the vendor package at the same time. It just so happens that the vendor package in the production environment does not have hash. Shortly after other business codes are sent with hash,A, B releases again, causing some users' browsers to cache the vendor package published by A. After the release of B, the users who cache A's vendor package use B's business code, resulting in code incompatibility and a blank screen on the page.

then came up with three solutions:

package.json specifies the specific version. Do not use ^ or ~ to describe it.
all packages that go into vendor are pre-compiled separately, and then the development and production environments use this precompiled package. Do not send this vendor package every time you release it.
the vendor package in the production environment comes with hash, and strongly flashes hash after each release.

Previous: On the problem of HikariPool delay

Next: Why does el-select not show the inner margin?

Menu