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

webpack

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

第一点，代码层面：

• 体积更小（Tree-Shaking 、压缩、合并），加载更快
• 编译高级语言或语法（TS、ES6+、模块化、scss）
• 兼容性和错误检查（Polyfill、postcss、eslint）

第二点，研发流程方面：

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

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，把 js 或 css 塞进 html 文件里。常见 puglin：DefinePlugin、BannerPlugin、DllPlugin、IgnorePlugin等

babel 和 webpack 的区别？

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

如何产出一个lib？

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-loader：babel 编译 ES6+ 到 ES5 过程会有较大消耗
  
• IgnorePlugin：避免一些Plugin
• noParse：不去解析哪些
• happyPack（开发和生成环境均可）：多进程打包工具
  
  
• ParallelUglifyPlugin（仅生产环境）：开启多进程并进行JS代码压缩
  

例如:
var a=10;
var b=20;
var c=a+b;
优化之后: var c=30;

关于开启多进程

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

• 自动刷新（不用于生产环境）：保存之后，编译完成后，浏览器会自动刷新（默认开启）
  

• 热更新（不用于生产环境）：自动刷新升级版，修改后，浏览器不用刷新，代码就生效

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

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

产出代码优化

为了达到如下效果：

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

处理：

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

• bundle 加 hash

• 懒加载

• 提取公共代码

• IgnorePlugin

• 使用 CDN 加速

• 使用 production

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

• Scope Hosting
  代码体积更小
  创建函数作用域更少
  代码可读性更好
  

ES6 Module 和 Commonjs 区别

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

彩蛋

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

☀️小狮子前端の学习☁️整理笔记❤️（传送门）

Vue全家桶+SSR+Koa2全栈开发☁️（传送门）

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

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

此外，我的微信公众号：小狮子前端Vue 也运作啦，目前已经开设前端每日一题专栏，每天会发布一篇文章，具体如下图所示，仅需几分钟，就能获得知识，岂不是白嫖的感觉~

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

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

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

学如逆水行舟，不进则退