webpack

npm  包管理工具。

webpack  前端的所有静态文件都可以通过webpack打包

处理静态文件,可以转化成线上可用的静态资源

 

web开发常用网络优化:

合并资源文件,减少http请求

压缩资源文件减小请求大小 

利用缓存机制,尽可能使用缓存减少请求。浏览器的缓存机制,设置cachecontrol,设置过期时间,浏览器会默认使用缓存文件请求不经过网络,相当于读取本地的文件。开发是阶段性的,一个月发布一个版本,版本更新之后代码肯定是更新的,因为http请求是url定位的,我们的静态资源的文件名没有进行更改,静态的url是不变的,浏览器还是默认的使用缓存。使用一个机制更新静态文件。让url发现这是一个新的文件名,新的url,加载新的文件。而不是上一个文件。

打包出来的文件,根据文件的内容进行数学计算得到一个hash值。hash是根据文件内容计算的,文件内容更新,hash值就会更新。

js太多,会有多个http请求???

入口文件     会根据依赖树的关系进行合并

webpack的基础配置

前端用到的所有资源都可以用webpack打包。webpack用的是loade这个机制。通过load处理你指定的某一种类型的资源,如javascript,css文件

 

 

 

 

服务端渲染

单页面应用存在的问题:

seo不友好:前端使用的框架都是在浏览器渲染 html内容  百度谷歌抓取内容时候不会执行js代码,根据网站的url请求的网页加载过来的是一个空白的html,没有 抓到任何内容,网站是没有任何东西的 ,不能使网站在搜索引擎上进行推广。

首次请求等待时间较长,体验不好。等js加载完之后才会出现内容。

 

服务端没有document   window

 

 

使用eslint和editorconfig规范代码。

 

 

你可能感兴趣的:(webpack,webpack)