3.7 资源定位

web项目中的资源定位

• 存在引用关系的资源之间被引用方地址的改动会及时同步到引用方

资源定位的历史变迁

原始形态-----一切都很简单

• web以静态展示为主，没有复杂的交互逻辑
• 部署方式是将css，js图片等静态资源和服务器端代码放在相同路径
• 不论开发生产环境，资源之间的相互引用使用相对路径就可以了
• 但随着互联网的发展，动静态资源的一同部署，无法适应密集的请求和并发量

内容分发网络-----推动进化的车轮

• CDN（content delivery network）内容分发网络，是一种部署策略，包括分布式存储，负载均衡，内容管理模块。
• CDN的实现细节不属于前端范围，但如果web使用了CDN部署策略，会影响到资源定位处理
• CDN的一个重要功能是将静态资源缓存到离用户距离近的CDN节点上
• CDN实现的前提，将静态资源部署到已经接入CDN解析服务的专属服务器上
• 独立域名的静态资源请求不会携带主页面的cookie等数据，加快网络访问
• 对服务器端渲染html，html和后端文件要一同部署，部署html时要将静态资源的引用改为CDN服务器的地址。数量少可以手动改，数量多可以使用模版引擎。
• 静态资源使用增量更新策略，每次迭代都会增加hash指纹，文件名会改变。前后端不分离，后端自己构建得到hash指纹，告知解析函数。前后端分离（但是还是后端渲染和部署），前端构建，告诉后端，增加沟通成本。

前后端分离-----将责任交给前端

• 将view层的开发和部署都交给前端
• 不论是前端渲染的spa，还是后端渲染的大前端，得益于nodejs和构建工具，资源定位都可以交给前端使用js驱动
• 资源定位交给前端，节省了沟通成本

常规的资源定位思维

• html是web站点的入口，其他所有静态资源都需要直接和间接的被html引用
• 浏览器正向地加载，浏览器先访问html，再根据资源的地址和先后顺序进行加载
• 构建工具webpack是与常规思维相反的逆向注入模式

webpack的逆向注入模式

• 将js作为一切资源的入口包括html
• 不管是直接引用还是间接引用，都引用关系的资源都会参与构建
• 直接引用，js引用css。间接引用，css引用图片。
• html和css 在webpack这都是二等公民，可以使用html-webpack-plugin编译html并且将其导出为独立的文件
• webpack是将项目构建输出的js和css文件逆向的注入html文档中

html-loader和html-webpack-plugin

• html-loader 会解析和编译html源码，但不会导出为独立的文件
• html-webpack-plugin的解析和编译还是由html-loader负责，自己可以支持导出独立的文件
• html-webpack-plugin的配置项

new HtmlWebpackPlugin({
//构建输出文件，导出文件的路径和文件名
  filename:''dest/index.html',
//模版源文件
  template:"src/index.html",
//自动注入chunks
  inject:true,
//注入指定的chunks
  chunks:[],
//引入的资源排序规则
  chunkSortMode:'auto'
})

index.html 构建前后的内容对比

• 源码，没有引用css的link标签，没有引用js的script标签。构建后，标签中有资源的引用地址。
• 源码中的img资源引用地址被html-loader修改

多页面项目的资源定位方案

• spa项目，webpack注入模式非常适用， 因为只有一个js和css文件，js注入到body底部，css注入到head底部，不需要关注它们具体在html的位置。
• 多页面项目，每个页面有自己的js和css，还可能存在交叉引用。这种资源定位，需要webpack更深的配置。
• chunks， chunkSortMode 来是实现交叉引用。chunk的指定范围局限在entry。
• 存在的问题

1. webpack 对chunk的划分是以entry指定的js为单位，css只是chunk中的一部分，不能单独注入css或者js

html-webpack-plugin-before-html-processing

• html-webpack-plugin 在编译html过程的不同阶段抛出特定的事件类型， html-webpack-plugin-before-html-processing是其中之一
• 编译各阶段的各资源状态

1. js和css编译完成，url更新完成
2. html文档中img标签的引用url更新完成
3. chunks尚未注入html

• 关闭inject，不让chunks自动注入html中
• 手动在html中添加link和script
• html-webpack-plugin-before-html-processing阶段扫描html文档，获取要引用的资源，替换为构建后的url