一、网页中引用哪些常见的静态资源
- JS，.js/.jsx/.coffee/.ts(TypeScript)
- CSS，.css/.less/.sass（旧）/.scss（新）
- Images，.jpg/.png/.bmp/.gif/.svg
- 字体文件（Fonts），.ttf/.eot/.woff/.woff2
- 模板文件，.ejs/.jade/.vue（这是在Webpack中定义组件的方式，推荐，每个组件都是一个文件）
二、静态资源多
- 网页加载速度慢， 要发起很多二次请求（URL请求一个网页，服务器返回html页面，浏览器从上到下渲染每一个html标签。解析到
<script></script>标签有src属性，则又要发起一个二次请求；样式标签；图片。。。） - 要处理错综复杂的依赖关系（需要用到bootstrap.js，之前还需要导入jquery.js）
三、解决资源多造成的问题
1、js、css，合并、压缩；图片，用精灵图、图片的Base64编码（原本图片有个src属性指向服务器的资源，可以让src指向一个Base64编码后的字符串，这样图片会随着第一次请求html代码下载到客户端，不用二次请求，比较适合小图片，否则字符串过长）
2、可以使用requireJS，也可以使用Webpack解决各个包之间的复杂关系。
四、实现解决方案
1、使用Gulp，进行压缩合并。是基于task任务的，小巧，适用于小的构建，不适合整个大项目。
2、使用Webpack，压缩合并转码。是基于整个项目进行构建的。
五、Webpack
前端的一个项目构建工具，基于Node.js开发出来的（即需要先安装Node.js）。
借助于Webpack这个前端自动化构建工具，可以完美实现资源合并、打包、压缩、混淆、处理依赖关系等功能。
网友评论