美文网首页前端--从Vue-cli配置学Webpack
什么是构建?webpack打包思想?

什么是构建?webpack打包思想?

作者: 下一站深圳 | 来源:发表于2017-09-18 11:01 被阅读0次

    旧的网页请求:
      网页= 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打包慢的解决方案》

    相关文章

      网友评论

        本文标题:什么是构建?webpack打包思想?

        本文链接:https://www.haomeiwen.com/subject/shgvsxtx.html