最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ReactJS中部署后防止H5页面被缓存

ReactJS crifan 4501浏览 0评论

之前就看到:

【基本解决】ReactJS的项目如何打包发布

中的:

Understanding React deployment – Bartosz Szczeciński – Medium

说是:

添加hash,可以使得每次生成的文件(bundle.js)不一样,

从而避免移动端的缓存而看不到更新后的内容的变化

Output

把:

/webpack.config.babel.js

从:

。。
module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: [‘babel-polyfill’, ‘./index.js’],
  output: {
    path: path.resolve(__dirname, "build"),
    // publicPath: ‘/’,
    publicPath: ‘/uapp/’,
    // publicPath: ‘./uapp/’,
    filename: ‘bundle.js’
  },
。。。

改为:

    // filename: ‘bundle.js’
    filename: ‘bundle_[hash].js’

然后再去:

npm run build

看看结果

果然可以生成:

bundle_51ee2ad7b114638c0c62.js

而不是之前的:

bundle.js

了。

然后部署到服务器端即可。

然后原生app去加载页面时,只要重新登录,基本上就可以重新加载最新的bundel.js了,基本上就可以起到防止页面被缓存的问题了。

不过,貌似也遇到个别androd手机中,即使重新登录,加载的也还是旧的页面,最后不得不卸载重新安装app才能加载最新页面的。

转载请注明:在路上 » 【已解决】ReactJS中部署后防止H5页面被缓存

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.190 seconds, using 22.15MB memory