前端的静态资源

网页中常见的静态资源

• 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

网页中引入过多静态资源产生的问题：

1. 网页加载速度慢， 因为网页要发起很多的二次请求（并行加载，加载不出来资源会进行二次请请求）；
2. 要处理错综复杂的依赖关系（各种文件之间的依赖，如在使用bootstrape之前必须引入JQuery）

解决办法：

1. 合并（资源）、压缩（资源）、精灵图、图片的Base64编码
2. 可以使用requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；

实现：

1. 使用Gulp， 是基于 task 任务的；
2. 使用Webpack， 是基于整个项目进行构建的；

借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。