码迷,mamicode.com
首页 > Web开发 > 详细

在网页中会引入哪些常见的静态资源?

时间:2020-03-23 17:02:13      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:请求   适合   复杂   介绍   gulp   如何   webp   web   网页加载   

在网页中会引入哪些常见的静态资源?
1.JS(.js   .jsx  .coffee  .ts(TypeScript 类 c# 语言   c sharp  语言))
2.CSS (.css   .less  .scss  .sass(基本不用了))
3.Images(.jpg  .png  .gif  .bmp  .svg)
4.字体文件(Fonts)(.svg  .ttf  .eot  .woff  .woff2)
5.模板文件(.ejs  .jade  .vue[这是在webpack中定义组件的方式,推荐这么用])
网页中引入的静态资源多了以后会有什么问题?
1.网页加载数据慢,因为我们要发起很多的二次请求;
2.要处理错综复杂的包依赖关系


如何解决上述两个问题?
1.合并、压缩、精灵图(常用的图片合成一张图片)、图片的base64编码(适合小图片);
2.可以使用requireJS,也可以使用webpack来解决各个包之间复杂的依赖关系。

##什么是webpack?
webpack是前端的一个项目构建工具,它是基于node.js开发出来的一个前段工具。

##如何完美实现上述的2中方案?
1.使用Gulp,基于task任务
2.使用webpack,基于整个项目进行构建的。
----借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
----根据官网的图片介绍webpack打包的过程;


##webpack安装的两种方式:
1.运行 ‘npm i webpack -g’ 全局安装webpack,这样就能在全局使用webpack的命令;
2.在项目根目录中运行 ‘npm i webpack --save-dev’ 安装到项目依赖中;

在网页中会引入哪些常见的静态资源?

标签:请求   适合   复杂   介绍   gulp   如何   webp   web   网页加载   

原文地址:https://www.cnblogs.com/linm/p/12552817.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!