网页中会引用哪些常见的静态资源呢?

  • JS :  .js    .jsx   .coffee   .ts(TypeScript  类C#语言)
  • CSS :  .css  .less  .sass  .scss
  • Images : .jpg  .png  .gif  .bmp  .svg  .ico
  • 字体文件 : .svg  .ttf  .eot  .woff  .woff2
  • 模板文件 : .ejs  .jade  .vue(这是在webpack中定义组件的方式,推荐这样用)

网页中会引用的静态资源多了以后有什么问题?

  1. 网页加载速度慢,因为我们要发很多的二次请求
  2. 要处理错综复杂的依赖关系

如何解决上述问题?

  1. 合并文件,压缩文件(图片),精灵图,图片的base 64编码
  2. 可以使用requireJS,也可以使用webpack解决各个包之间的依赖关系

我们的征途是星辰大海