打包资源与网络分析
运行
npm run dev,查看网络情况
- 打开页面，页面收到的响应如下。
- localhost中请求头如下：
localhost的响应头如下:
分析
- 请求头中的If-None-Match与响应头中的Etag内容一致，说明资源未被修改。对应的响应头为304
- 资源接受顺序 indexl.html->bundle.js-> 图片文件。
- 之后浏览器和本地服务器保持websocket连接
在vscode中修改css文件(热更新)
- 服务器先发给浏览器发送了一个hot-update.json文件
- 服务器接下来给浏览器发送了一个.js文件，里面是修改的内容
热更新原理图：
Vue文件从打包->部署到服务器->浏览器访问期间发生了什么
打包过程中，webpack的vue-loader会将.vue文件中的模板编译为渲染函数
create->beforeMount:
- 判断是否有el对象
- 判断是否有模板
- 有则将模板转化为render函数，通过render函数去创建DOM树
beforMount->Mounted：
- 将DOM树挂载到el对象上 再Mounted钩子函数中可以访问DOM数
总结
- 打包过程中会执行vue-loader中的vue-template-compiler，提前将vue中的模板编译为渲染函数
- 浏览器访问服务器根目录，首先收到的是index.html文件。再根据模块依赖关系分别请求bundle.js文件、图片文件
- bundle.js文件中有处理过的js文件、处理过的css文件、初次编译的.vue文件(其实就是js文件)
- 如果不使用打包，所有文件都将依次发送到服务器，会产生更多的通信开销，延长首屏加载时间
项目文件目录如下所示：
