网页中会使用到的静态资源
- JS
- .js .jsx .coffee .ts(TypeScript 类 C# 语言)
- CSS
- .css .less .sass .scss
- Images
- .jpg .png .gif .bmp .svg
- 字体文件(Fonts)
- .svg .ttf .eot .woff .woff2
- 模板文件
- .ejs .jade .vue【这是在webpack中定义组件的方式,推荐这么用】
网页中引入的静态资源多了有什么问题
会造成二次甚至多次请求
- 网页加载速度慢,因为我们要发起很多二次请求
- 要处理错综复杂的依赖关系
如何解决这两个问题呢
- 合并 压缩 使用精灵图 图片的base64编码
- base64 的主要功能是减少http请求,预加载需要用到图片
- 利用requireJS 和webpack 解决各个包之间复杂依赖的关系
什么是webpack
- 他是一个前端项目构建工具,他是基于node.js 的开发出来的工具
如何完美实现上述的两种解决方案
- 使用gulp 是基于task任务的: 在一个项目里,它创建出多个小任务来解决问题
- 使用