标签：vue-cli 资源 方案 mobile poc 速度 优先 cal javascrip
目录
今年公司技术考察，考察了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、图片进行缓存，下次同一请求会优先从浏览器缓存中取，这在很大程度上提升了我们的访问速度，但是也带来了些问题。详见浏览器缓存机制剖析。
在项目每次编译后，如有修改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>通过使用 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>标签：vue-cli 资源 方案 mobile poc 速度 优先 cal javascrip
原文地址：https://www.cnblogs.com/vipinchan/p/9265976.html
