旧的网页请求:
网页= html + js + css + picture + font 等一系列资源文件
浏览器访问时一个页面,同时也会发出对资源文件的请求,造成不好的是:多个请求,影响浏览器响应速度,用户看到白屏时间过长(最好做成一个请求就能get到全部);其二,很多文件没有压缩过,返回的文件里的字节流比压缩过的大很多;其三,你代码中可能有很多注释你不想展示给客户,但是代码注释不能删除。
前端构建的方式:
Webpack可以把网页的所以需要的 js css 图片等资源整体打包压缩,用户只需请求你的打包后的文件,请求数大大减少,浏览器的响应速度变快,减少用户的等待时间。所以这就是我们需要前端构建的原因
webpack的打包思想:chunk思想
chunk,块。 webpack 分析一个网页中所需要的js文件,css文件,font文件,每一个文件都是一块一块,以及各自文件所依赖的文件,形成一个依赖树。然后webpack根据文件的类型,采用不同的loader做处理,比如js文件,用babel-loader将es6转换,css 文件用post-loader做兼容处理等,然后输入到html文件里面,这样用户只需访问你的index.html就可以了,减少了很多请求。所以我理解成"鲜花公式":
鲜花(网页) = 外层包装纸(html) + js (鲜花) + css(绿叶)+ 其他装饰物(font等其他资源文件)
官网是这么称呼的:
打包后是Bundle, 一捆
每一个模块文件是chunk, 块
系列文章:
《什么是构建? webpack打包思想?》
《webpack基础使用》
《从vue-cli学webpack配置1——针对webpack2》
《从vue-cli学webpack配置2——针对webpack3》
《webpack 、mainfest 、runtime 、缓存与CommonsChunkPlugin》
《webpack打包慢的解决方案》
网友评论