网页中常见的静态资源
-
JS
- .js 、.jsx 、 .coffee 、 .ts(TypeScript )
-
CSS
- .css 、 .less 、 .sass 、.scss
-
Images
- .jpg、 .png 、 .gif 、 .bmp、 .svg
-
字体文件(Fonts)
- .svg 、 .ttf 、 .eot 、 .woff 、 .woff2
-
模板文件
- .ejs、 .jade 、 .vue
网页中引入过多静态资源产生的问题:
- 网页加载速度慢, 因为网页要发起很多的二次请求(并行加载,加载不出来资源会进行二次请请求);
- 要处理错综复杂的依赖关系(各种文件之间的依赖,如在使用bootstrape之前必须引入JQuery)
解决办法:
- 合并(资源)、压缩(资源)、精灵图、图片的Base64编码
- 可以使用requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系;
实现:
- 使用Gulp, 是基于 task 任务的;
- 使用Webpack, 是基于整个项目进行构建的;
借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。