1.1.1 网页中常见的静态资源

  • 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中定义组件的方式，推荐这么用】

1.1.2 静态资源带来的问题

  1. 网页加载速度慢， 因为我们要发起很多的二次请求；

  2. 要处理错综复杂的依赖关系

    1.1.3 如何解决上述两个问题

  3. 合并、压缩、精灵图、图片的Base64编码

  4. 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；

    1.1.4 完美实现上述问题的2种解决方案

  5. 使用Gulp/Grunt， 是基于 task 任务的，是前端构建工具；

  6. 使用browserify/Webpack， 是预编译的模块化方案；