Powered by GitBook

问题1. 发布之后客户端不能及时获取最新内容

问题原因： 浏览器&http缓存导致
解决： 
1）添加心跳机制  检查是否有版本更新  （对比当前版本号和服务器返回的版本号）  有更新的话，提示用户刷新拉取最新内容
2）添加token过期机制  过期之后强制重新登录
3) 增量更新 保留上一版本的文件 发布新打包的文件
4) 代码中在环境变量里配置版本号   项目中增加config.json文件，内部包含版本号、更新内容等信息。 路由切换的时候，请求config.json
    文件，获取文件中的版本号，与代码中的版本号做对比。如果版本号不一致，调用window.reload(true)强制刷新浏览器，获取最新内容。

问题2 单点登录多个单页面应用系统集成

所有系统顶级域名保持一致
在顶级域名设置cookie  所有子系统通过访问顶级域名cookie实现系统间通信

问题3 线上样式加载不出来

排查：打开网络请求面板，发现样式文件请求成功 
原因： 因为返回的样式文件的content-type不正确，返回的是text/plain  不能被网页正常解析成css
根本原因： 1）webpack htmlwebpackplugin插件生成的index.html文件中link没有type属性  只有rel和href这俩 
       2）运维端 没有把文件类型为text/css的配置放到前面  导致改css文件匹配上了默认的text/plain
解决： 1）前端为所有的link标签添加type属性  具体做法，自定义一个插件，在htmlwebpackplugin生成好配置数据之后 
      修改配置中的head属性下面的tagName为link的对象中的attributes对象  为其添加一个type="text/css"
    2）运维端添加text/css类型配置  优先匹配


插件代码：
/**
 * 为link、script等添加MIME Type
 */

class AddMIMETypePlugin {
  constructor(options) {}

  apply(compiler) {
    // Webpack 4
    if (compiler.hooks) {
      compiler.hooks.compilation.tap('AddMIMETypePlugin', function (compilation) {
        compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('AddMIMETypePlugin', function (htmlPluginData, callback) {
          // 添加mime
          callback(null, addCSSTypeAttr(htmlPluginData))
        })
      })
    } else {
      compiler.plugin('compilation', function (compilation) {
        compilation.plugin('html-webpack-plugin-alter-asset-tags', function (htmlPluginData, callback) {
          callback(null, addCSSTypeAttr(htmlPluginData))
        })
      })
    }
  }
}

// 为link添加mime type属性
function addCSSTypeAttr (htmlPluginData) {
  if (Array.isArray(htmlPluginData.head)) {
    htmlPluginData.head = htmlPluginData.head.map(item => {
      if (item.tagName=="link") {
        item.attributes.type = 'text/css'
      }
      return item
    })
  }
  return htmlPluginData
}

module.exports = AddMIMETypePlugin


需要在webpack.prod.config.js添加该插件：
plugins: [
HtmlWebpackPlugin(),
new AddMIMETypePlugin(),
]

问题4 CDN强缓存问题

1） CDN强缓存没有过滤404页面

问题描述： cdn设置了静态资源缓存时间为一个月，没有过滤404等异常页面，导致在发版（线上两台机器）的过程中，出现访问404情况，404页面被缓存起来，
再刷新不能获取新文件。

解决：联系cdn运营商，设置正常访问的静态资源强缓存时间为一个月，404页面的强缓存时间为10秒。2.在发第一台机器的时候，摘掉第二台机器的
    流量？

问题5 https自签证书问题

问题描述：
点击播放按钮，请求声音文件并播放。结果播放按钮不可用。

原因： 音频文件请求失败，导致声音资源未加载到audio标签中，所以不能播放。加载失败的原因是，音频文件是https的，二对应的是自签证书，
谷歌浏览做了风险拦截，导致资源访问失败。

解决：1. 临时解决：手动允许访问不安全的域名  2 彻底解决：联系服务商，提供权威机构颁发的https证书

页面定时刷新定时器setInterval 同时发起多个ajax请求长时间运行页面卡死

1. 如果刷新间隔小， 每次刷新请求数比较多或者比较耗时， 使用setTimeout ！！

参考： https://www.cnblogs.com/zlp520/p/9292079.html
      https://johnresig.com/blog/how-javascript-timers-work/


2. 使用Chrome DevTools定位页面卡顿原因 （https://developers.google.com/web/tools/chrome-devtools/）

修改本机hosts文件

修改本机hosts有助于在本地开发的时候模拟各种域名环境  方便实现跨域、cookie共享等问题

比如 本地允许项目，登录使用三方的统一登录，登录成功之后后端在.missfresh.net种一个cookie 跳转回来之后  本地是localhost拿不到
该cookie, 所以需要在本地配置一个域名映射  localhost xxx.missfresh.net

results matching ""

No results matching ""