| 子任务项 | 完成日期 | 耗时 | 备注 |
|---|---|---|---|
| 1.技术调研 | 3.7-3.15 | ---- | 1.采用webpack的cache缓存和tree-shaking等特性来优化代码 2.采用webpack5的模块联邦来提供远程文件. 2.最终呈现的效果是, 用户拿到一个轻量的客户端,相当于是一个浏览器. 从服务器拿页面和文件. 我这边只需要更新服务器上的文件即可. 同时,文件会被拆分成公共部分和独有部分. 公共部分即三个软件共同所用, 包括自动回复配置模块,复刷配置模块,工具函数等,减少维护成本. 独有部分即专门的寻找dom和执行任务部分. |
| 2.客户端改造成壳子, 页面和文件都从远程服务器拿 ,页面和文件都采用缓存技术,加上hash值,以省流量 | 3.15 | ---- | ---- |
| 3.1 改造utils.js部分,即右侧配置部分, 拆成公共部分和独有部分, 公共部分供其他软件使用. | 3.16 | ---- | ---- |
| 3.2 改造webview-utils.js部分,即寻找dom部分和执行部分, 拆出公共部分和独有部分,公共部分供其他软件使用 | 3.16~3.18 | ---- | ---- |
| 4.改造智联和58成远程文件模式,并测试 | 3.19~3.20 | ---- |
探索类工作,总报价4k
收:2000+2000
3.27
安装依赖
npm i clean-webpack-plugin css-loader css-minimizer-webpack-plugin html-webpack-plugin mini-css-extract-plugin style-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server webpack-obfuscator -D配置webpack.lib.dev => 作为lib 生成各种远程文件,开发环境
配置webpack.lib.prod => 作为lib 生成各种远程文件,生产环境
配置webpack.config.host.dev => 作为host 接收远程文件,开发
配置webpack.config.host.prod => 作为host 接收远程文件,生产
改造index.html => 把页面都放到vue组件中打包utils => utils改造成远程组件
把依赖项拆出去
采用项目中的依赖项.打包webview.utils
执行联邦模块
考虑hash的应用
3.30
- 缓存问题还没解决 解决
- 拿最新的dev_boss跟现在的分支比较 解决
- main.js中的 tokenMap删除 解决
- 登陆后,会立马执行心跳. 登录设置当前卡密 和 执行心跳应该间隔一定时间 解决
- 研究怎么显示pc版和普通版. 解决
- 发版清空重置操作,要保留下来 解决
- 所有html文件要整合到utils中
3.31
1.main.js整合成远程文件 失败
4.1
- ctrl+r 普通刷新,即根据缓存协议去获取文件
ctrl+shift+r 强制刷新,即强制获取所有文件 - 默认情况下,第一次请求文件,浏览器会默认设置cache-control:no-cache,
没有缓存则直接请求, 有缓存则询问浏览器本地文件是否新鲜, 不新鲜就去再次请求 - 接2,没有缓存时直接请求,服务器(nginx)会自动返回etag和last-modified给客户端的文件记录上去.
以后再次发送请求,浏览器就会用if-none-match和if-since-modified去跟服务器协商缓存 - 接3, etag/if-none-match是对last-modified/if-since-modified的补充, 比如文件内容无变化,但周期性更新,或者一秒内多次更新. 这时候etag没变化, last-modified会发生变化. 也就是说etag>last-modified.
控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Conctrol的优先级比Expires高。
在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：
public：所有内容都将被缓存（客户端和代理服务器都可缓存）private：所有内容只有客户端可以缓存，Cache-Control的默认取值no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效must-revalidate:告诉浏览器、缓存服务器，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。这里可以和no-cache 进行深入探究，想了解的同学们可以去这里。
Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since，同时存在则只有Etag / If-None-Match生效。
https://blog.csdn.net/CRMEB/article/details/122835505
https://blog.csdn.net/qq_17335549/article/details/128630153
https://blog.csdn.net/wsln_123456/article/details/105673820
4.3 获取webview.utils.js, 应该核对远程和本地的文件名,名字一致时则不重写文件 解决
4.6 如何把公共代码拆分出来,这部分变动少,缓存起来.
