简单优化前端工程几种方式（上篇）

使用CDN

如果A网站和B网站, 同时使用了https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js的资源, 在访问其他网站A时, 浏览器会缓存jquery.min.js资源文件, 访问网站B时,就可以免于下载jquery.min.js的文件, 这样既节省了服务器流量, 又提升了资源加载的速度, 一举两得~

减少网络请求

• 使用雪碧图(用Photoshop将多个icon拼接到一张图上)
• 将多个js文件合并压缩为单个js文件(使用Webpack,或在线工具)

减少图片尺寸

可以使用PP鸭一键压缩, 具体介绍: PP鸭为你的图片瘦瘦瘦身 (支持快速压缩jpg, png, gif三种格式)

将图片保存为渐进式jpg

将图片保存为渐进式jpg后, 图片在浏览器显示时, 可以由模糊到清晰渐进式加载, 提升用户体验

将javascript脚本放到html的底部

• HTML文件是从上往下渲染的, 如果js脚本有大量耗时操作, js执行期间, 用户是不能看到页面的

• mdn的解释链接: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics

一般我们会把css样式文件放在html的头部, javascript脚本文件放在页面底部, 但什么事情都有特例, 比如bootstrap的部分组件依赖jquery,也就是jquery必须在bootstrap之前引入, 如果我们要在页面头部引入bootstrp样式的话, 那jquery也必须放到了页面的头部!