Weex/Vue项目中静态资源缓存处理.md

Posted 2020-11-21 vipinchan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Weex/Vue项目中静态资源缓存处理.md相关的知识，希望对你有一定的参考价值。

一、项目缓存问题
二、浏览器本地缓存
三、解决方案

今年公司技术考察，考察了EMAS平台，从而接触了weex，并且为了进行POC测试，大胆采用weex进行新web项目试点。weex内置了vue框架，整体框架与vue一致，好在刚接触了vue一段时间，因此用起来还算顺手，碰到问题weex官方文档没有的，基本都可以参考vue的文档。

一、项目缓存问题

第一次接触这类前后端完全分离的开发模式，一开始的确是一头雾水，一个多月时间，难点一点一点克服，目前进入项目测试阶段，经常碰到bug修复了，测试人员说他那还存在，一看自己这里是好的，也就知道又是浏览器端缓存没更新了（目前处理缓存是通过手动追加时间串，经常发布代码时会忘加了）。而VUE的项目却没有这个问题，每次发布都会自动生成全新的文件，研究后发现这是vue-cli初始化项目时，自动配置好缓存缓存的处理了，所以参考vue项目的配置修改weex项目配置即可。

二、浏览器本地缓存

浏览器有自己的一套缓存策略（Cache-Control、Pragma、ETag、Expires、Last-Modified），会对静态资源如css、js、图片进行缓存，下次同一请求会优先从浏览器缓存中取，这在很大程度上提升了我们的访问速度，但是也带来了些问题。详见浏览器缓存机制剖析。

三、解决方案

1. 手动修改文件名

在项目每次编译后，如有修改js，则更新html中js引用地址，习惯追加时间index.web.js?_v20180628003

// index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>hello world!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no, email=no">
</head>
<body>
  <div id="root"></div>
</body>
<script type="text/javascript" src="index.web.js?_v20180628003" defer></script>
<script type="text/javascript" src="vendor.web.js?_v20180628003" defer></script>
</html>

2. 使用webpack自动更新文件名

通过使用 output.filename 进行文件名替换，可以确保浏览器获取到修改后的文件。[hash] 替换可以用于在文件名中包含一个构建相关(build-specific)的 hash，但是更好的方式是使用 [chunkhash] 替换，在文件名中包含一个 chunk 相关(chunk-specific)的哈希。
官方文档：https://webpack.docschina.org/guides/caching

// webpack.config.js
output: {
    path: helper.rootNode(‘./dist‘),
    filename: ‘[name].web.[chunkhash].js‘,
    sourceMapFilename: ‘[name].web.map‘
},

js文件是生成了，还需要动态注入到入口html文件如index.html，这里需要用到插件html-webpack-plugin，html-webpack-plugin插件可根据模板动态生产html文件，并将生成的js动态嵌入html中。

// webpack.conf.js
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); // output html file
plugins: [
  new HtmlWebpackPlugin({
    template: ‘index.html‘ // 模板文件放在根目录上
  })
]

// 模板文件index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>hello world!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no, email=no">
</head>
<body>
  <div id="root"></div>
</body>
<!--将jsbundle动态注入这里-->
</html>

以上是关于Weex/Vue项目中静态资源缓存处理.md的主要内容，如果未能解决你的问题，请参考以下文章