【前端】那些容易忘掉的前端知识 webpack梳理篇

webpack

【前端】那些容易忘掉的前端知识 webpack梳理篇_第1张图片

前端代码为何要进行构建和打包?

第一点,代码层面:

  • 体积更小(Tree-Shaking 、压缩、合并),加载更快
  • 编译高级语言或语法(TSES6+、模块化、scss
  • 兼容性和错误检查(Polyfillpostcsseslint

第二点,研发流程方面:

  • 统一、高效的开发环境
  • 统一的构建流程、产出标准
  • 集成公司构建规范(提测、上线等)

module chunk bundle分别什么意思,有何区别?

  • module —— 各个源码文件,webpack中一切皆模块
  • chunk —— 多模块合并成的,如 entry import() splitChunk
  • bundle —— 最终的输出文件

loader 和 plugin 的区别?

  • loader 模块转换器,如 less -> css 。常见 loader : json-loader、cache-loader、babel-loader、html,css,less,imports…
  • plugin 拓展插件,如 HtmlWebpackPlugin,把 jscss 塞进 html 文件里。常见 puglin:DefinePlugin、BannerPlugin、DllPlugin、IgnorePlugin等

babel 和 webpack 的区别?

  • babel —— JS 新语法编译工具、不关心api、不关心模块化
  • webpack —— 打包构建工具,是多个 loaderPlugin 的集合

如何产出一个lib?

【前端】那些容易忘掉的前端知识 webpack梳理篇_第2张图片

webpack如何实现懒加载?

  • imort()
  • 结合 Vue React 异步组件
  • 结合 Vue-router React-router 异步加载路由

为何Proxy 不能被 Ployfill

  • class 可以用 function 模拟
  • Promise 可以用 callback 来模拟
  • Proxy 的功能用 Object.defineProperty 无法模拟

babel-runtime 和 babel-ployfill的区别?

  • babel-ployfill 会污染全局
  • babel-runtime 不会污染全局
  • 产出第三方 lib 需要用 babel-runtime

webpack常见性能优化?

构建速度优化

  • 优化 babel-loaderbabel 编译 ES6+ES5 过程会有较大消耗
    【前端】那些容易忘掉的前端知识 webpack梳理篇_第3张图片
  • IgnorePlugin:避免一些Plugin
  • noParse:不去解析哪些
  • happyPack(开发和生成环境均可):多进程打包工具
    【前端】那些容易忘掉的前端知识 webpack梳理篇_第4张图片
    【前端】那些容易忘掉的前端知识 webpack梳理篇_第5张图片
  • ParallelUglifyPlugin(仅生产环境):开启多进程并进行JS代码压缩
    【前端】那些容易忘掉的前端知识 webpack梳理篇_第6张图片
例如:
var a=10;
var b=20;
var c=a+b;
优化之后: var c=30;

关于开启多进程

项目较大,打包较慢,开启多进程能够提高速度
项目较小,打包很快,开启多进程会降低速度(增加进程开销)
因此,按需使用

  • 自动刷新(不用于生产环境):保存之后,编译完成后,浏览器会自动刷新(默认开启)
    【前端】那些容易忘掉的前端知识 webpack梳理篇_第7张图片

  • 热更新(不用于生产环境):自动刷新升级版,修改后,浏览器不用刷新,代码就生效

    关于自动刷新的问题:整个网页全部刷新,速度较慢,状态会丢失,另外,对于SPA网页,如果有深层路由的话,一旦代码修改,路由就会返回首页。
    而热更新的好处是,新代码生效,网页不刷新,状态不丢失。

【前端】那些容易忘掉的前端知识 webpack梳理篇_第8张图片
【前端】那些容易忘掉的前端知识 webpack梳理篇_第9张图片

  • DllPlugin(动态链接库插件,不用于生产环境):针对比较大的第三方插件,没有必要每次打包都要让它打包一遍,可以优先打包好后,即打包 dll 文件,然后再引用它,具体使用通过 DllReferencePlugin 来使用 dll 文件。

产出代码优化

为了达到如下效果:

  • 体积更小
  • 合理分包,不重复加载
  • 速度更快、内容使用更少

处理:

  • 小图片 base64 编码,减少网络请求

  • bundlehash

  • 懒加载

  • 提取公共代码

  • IgnorePlugin

  • 使用 CDN 加速

  • 使用 production

    自动开启压缩代码
    Vue React 等会自动删掉调试代码(如开发环境的 warning
    ES6 Module 才能让 tree-shaking 生效,而 commonjs 不行,因为只有静态引用才可生效,见下文区别)

  • Scope Hosting
    代码体积更小
    创建函数作用域更少
    代码可读性更好
    【前端】那些容易忘掉的前端知识 webpack梳理篇_第10张图片

ES6 Module 和 Commonjs 区别

  • ES6 Module 静态引入,编译时引入(直接引用,不能用代码变量判断是否引用)
  • Commonjs 动态引入,执行时引入

【前端】那些容易忘掉的前端知识 webpack梳理篇_第11张图片

彩蛋

之前一直折腾美团那个项目,在视频介绍有说过,做完项目就继续整理我的笔记仓库。如下图所示,自己还是觉得有不错的回应吧,建立仓库之初还没有想过会有人给我 star,更别说 fork 之后 pull request 了。诶,没想到还真有,✿✿ヽ(°▽°)ノ✿

【前端】那些容易忘掉的前端知识 webpack梳理篇_第12张图片
☀️小狮子前端の学习☁️整理笔记❤️(传送门)

Vue全家桶+SSR+Koa2全栈开发☁️(传送门)

如果您觉得不错,那么请毫不留情地给个 star 吧,您的支持是我继续创作的动力!star 数越多,就会有更多的小伙伴能够看到,或许更多的人在前端有了方向不是。

目前,可以说前端知识梳理篇正式出炉啦,请读者跟上俺的步伐,一起学习前端知识吧,不妨关注一波不迷路~

此外,我的微信公众号:小狮子前端Vue 也运作啦,目前已经开设前端每日一题专栏,每天会发布一篇文章,具体如下图所示,仅需几分钟,就能获得知识,岂不是白嫖的感觉~
【前端】那些容易忘掉的前端知识 webpack梳理篇_第13张图片

此次灵感也是来自于在微信 看一看 ,我看到了考研大军的激情,有着每日一句的专栏,每天可能就只需要那么几分钟的时间,就能学习英语。我觉得是挺不错的,那我也想尝试这样做,一方面,我能每天整理一点学习笔记来,另一方面,也算是自己每天学习打卡。一小步或许就是未来一大步,要来一起打卡吗✿✿ヽ(°▽°)ノ✿

最后,没啥要总结的了,小狮子笔记仓库会一直更新下去,每日一题专栏我也会坚持记录。我想,能影响一些人就已经不错啦,曾经也是受过很多dalao影响,目前也是在回馈开源。好啦,下期再见,一个不是只会写业务代码的前端攻城狮在下一期又会写什么呢?

点赞收藏评论,三连支持,下期早点见哈哈哈哈哈~

学如逆水行舟,不进则退

你可能感兴趣的:(Vue全家桶系列,Vue,技术栈)