关于前端:jsliang-求职系列-36-前端工程化系列总结

不折腾的前端，和咸鱼有什么区别

目录
一目录
二温习知识点
2.1 Babel
2.2 Webpack
2.3 Webpack – Tree Shaking
2.4 Webpack – Scope Hoisting
2.5 Webpack 简略实现
2.6 Webpack 性能优化
三参考文献
3.1 杂
3.2 Babel
3.3 模板引擎
3.4 前端监控
四 Webpack 参考文献
4.1 Webpack 系列文章
4.2 Webpack 性能优化
4.3 Scope Hoisting
4.4 Tree Shaking
4.5 懒加载

本系列参考 79 篇文章，总结出 6 篇文章，感激小伙伴们的反对。

文章地址：Babel

[x] AST：形象语法树，是源代码语法结构的一种形象示意
[x] 原理：将现有的 ES6+ 代码，先通过 词法剖析 和 语法分析 之后解析为 AST，而后将这份 AST 转换为咱们须要模式的 AST，最初将这个 AST 再转换成 ES5 或者冀望格局的内容。

文章地址：Webpack

[x] 是什么：实质是一个模块打包器，其工作是将每个模块打包成相应的 bundle
[x] 外围概念：mode、entry、output、loader、plugin
[x] 构建流程：初始化、编译、输入，插件（Plugin）随时监听 Webpack 播送并在某些时候调用 API 扭转运行后果。
[x] entry：指定打包⼊口⽂文件。本来是 string，即一个入口对一个打包文件、object 多对一，array 多对多
[x] output：打包后的文件地位
[x] loader：翻译官，对不同资源进行解决，从右向左执行
[x] plugin：插件，扩大 Webpack 的性能，监听 Webpack 的生命周期，调用 API 扭转输入后果。
[x] resolve：配置 Webpack 如何寻找模块所对应的文件。resolve.modules/extensions/include/exclude
[x] 从 0 开始配置 Webpack
- [x] 技术选型：挪动端 |PC、MPA|SPA、HTML| 模板引擎、CSS| 预处理器、ES5|ES6+、Mock、React|Vue、多人单干 | 单人我的项目、ESlint|TSlint、单元测试、提交标准
- [x] Loader 解决 CSS、Less、Sass
- [x] Loader 解决图片
- [x] Loader 解决字体
- [x] Loader 配置多页面打包（MPA）
- [x] source map
- [x] webpack dev server
- [x] babel
- [x] react
- [x] 性能优化
- [x] 其余：解析器、写 Loader、写 Plugin
[x] 懒加载
- [x] 代码宰割：code splitting
- [x] 实现原理：子模块独自打包、借助函数提早加载
- [x] Vue 按需加载
[x] 热更新
- [x] 开启形式：配置 devServer，增加热更新插件 HotModuleReplacementPlugin
- [x] 热更新原理
[x] 3 种 hash：
- [x] hash：整个我的项目只有有文件更改，那就变更
- [x] chunkhash：某个入口对应的 chunk 进行了变更，那就生成新的 hash 值，不会影响其余 chunk
- [x] contenthash：对应某个文件内容变更了，才会更换这个文件，生成新的 hash，而不会影响同一个模块下其余文件
[x] source map：将编译、打包、压缩后的代码映射回源代码的过程

文章地址：Webpack – Tree Shaking

[x] Tree Shaking：通过在 package.json 中开启 sideEffects，将 ES6 模板语法的 import 行为导入的文件都标记为无副作用，而后开启 -p 的生产模式，让 Webpack 调用外部的 UglifyJSWebpackPlugin 来进行删除未援用代码。
[x] dead-code：代码不会被执行，或者执行后果不会被用到，或者代码只会影响死变量的，叫做 dead-code
[x] 副作用：如果在 import 导入时就会做一些非凡行为的代码，称之为有副作用的代码，例如 polyfill 会影响全局作用域
[x] 动态剖析：ES6 模板语法能够在不执行代码的状况下，从字面量上对代码进行剖析。动态剖析是 Tree Shaking 的根底。而 require 是须要执行了才晓得援用内容的，就不能通过动态剖析做优化

文章地址：Webpack – Scope Hoisting

[x] Scope Hoisting：Webpack3 增加的性能，作用域晋升。原理是剖析模块的援用关系，将打散的模块合并到同一个函数中，须要 ES6 模板语法进行动态剖析

文章地址：Webpack 简略实现

[x] 利用 babel 实现代码转换，并生成单个文件的依赖
[x] 生成依赖图谱
[x] 生成最初打包代码

文章地址：Webpack 性能优化

[x] resolve.modules：用于配置 Webpack 去哪些目录下寻找第三方模块（node_modules）
[x] resolve.extensions：在导入没带文件后缀的门路时，Webpack 会主动带上后缀去尝试询问文件是否存在，而 resolve.extensions 用于配置尝试后缀列表；默认为 extensions:['js', 'json']
[x] resolve.include/exclude：以 babel-loader 为例，能够通过 include 和 exclude 帮忙咱们防止 node_modules 这类宏大文件夹]
[x] 缓存：cache-loader 和 uglifyjs-webpack-plugin，将编译后果写进硬盘缓存，下次文件如果没有变动则间接拉取缓存
[x] 多过程：Happypack 和 thread-loader，将工作分解成多个子过程去并发执行，进步打包效率
[x] 多过程压缩：Webpack 自带的 UglifyJSWebpackPlugin 压缩插件是单线程运行的，而 TerserWebpackPlugin 能够并行执行（多线程）
[x] 动态资源拆散：CommonsChunkPlugins 每次构建都会从新构建 vendor，出于效率问题应用 DllPlugin 能够将第三方库独自打包到一个文件中，只有依赖本身产生版本变动才会从新打包
[x] 打包资源压缩：
- [x] JS 压缩：UglifyJSWebpackPlugin 和 TerserWebpackPlugin
- [x] HTML 压缩：HtmlWebpackPlugin
- [x] CSS 压缩：MiniCssExtractPlugin
- [x] 图片压缩：ImageWebpackPlugin
- [x] Gzip 压缩：不包含图片
[x] Tree Shaking
[x] Scope Hoisiting
[x] 按需加载

本系列参考文献有 79 篇.

2020：

[x] 大公司里怎么开发和部署前端代码？【浏览倡议：10min】
[x] 前端高级进阶：前端部署的倒退历程【浏览倡议：20min】

2019：

[x] 前端同构渲染的思考与实际【浏览倡议：20min】

2018：

[x] 前端工程师为什么要学习编译原理？【浏览倡议：30min】
[x] 50 行代码的 MVVM，感触闭包的艺术【浏览倡议：10min】
[x] 不好意思！耽搁你的十分钟，让 MVVM 原理还给你【浏览倡议：20min】
[x] 2018 前端性能优化清单【浏览倡议：30min】
[x] 网页图片加载优化计划【浏览倡议：20min】
[x] 如何优雅解决前端异样【浏览倡议：30min】

[x] 一篇文章理解前端开发必须懂的 Babel【浏览倡议：10min】
[x] 不容错过的 Babel7 常识【浏览倡议：30min】
[x] 前端工程师须要理解的 Babel 常识【浏览倡议：30min】
[x] 深入浅出 Babel 上篇：架构和原理 + 实战【浏览倡议：30min】
[x] 深入浅出 Babel 下篇：既生 Plugin 何生 Macros【浏览倡议：30min】
[x] 前端工程师的自我涵养 - 对于 Babel 那些事儿【浏览倡议：20min】
[x] 前端与编译原理——用 JS 写一个 JS 解释器【浏览倡议：20min】
[x] 面试官: 你理解过 Babel 吗？写过 Babel 插件吗? 答: 没有。卒【浏览倡议：10min】
[x] 入门 babel– 实现一个 es6 的 class 转换器【浏览倡议：10min】

[x] 编写一个简略的 JavaScript 模板引擎【浏览倡议：5min】
[x] JavaScript 模板引擎原理，几行代码的事儿浏览倡议：10min】
[x] Vue 模板编译原理【浏览倡议：30min】

[x] 5 分钟撸一个前端性能监控工具【浏览倡议：10min】
[x] 把前端监控做到极致【浏览倡议：10min】
[x] GMTC 大前端时代前端监控的最佳实际【浏览倡议：20min】
[x] 前端监控和前端埋点方案设计【浏览倡议：20min】
[x] 腾讯 CDC 团队：前端异样监控解决方案【浏览倡议：20min】
[x] 把前端监控做到极致【浏览倡议：10min】

Webpack 系列参考文献有 52 篇文章。

其余：

[x] Webpack 中文文档【浏览倡议：无】
[x] Webpack 小书【浏览倡议：无】

2020 年文章：

[x]「吐血整顿」再来一打 Webpack 面试题【浏览倡议：1h】
[x] 带你深度解锁 Webpack 系列(根底篇)【浏览倡议：1h】
[x] 带你深度解锁 Webpack 系列(进阶篇)【浏览倡议：30min】
[x] 带你深度解锁 Webpack 系列(优化篇)【浏览倡议：20min】
[x] webpack loader 从上手到了解系列：vue-loader【浏览倡议：20min】
[x] webpack loader 从上手到了解系列：style-loader【浏览倡议：20min】
[x] 霖呆呆的 webpack 之路 -loader 篇【浏览倡议：20min】
[x] 揭秘 webpack plugin【浏览倡议：30min】

2019 年文章：

[x] 对于 webpack4 的 14 个知识点, 童叟无欺【浏览倡议：30min】
[x] 实现一个简略的 webpack【浏览倡议：1h】
[x] 一文把握 Webpack 编译流程【浏览倡议：1h】
[x] 前端工程师都得把握的 webpack Loader【浏览倡议：30min】
[x] 轻松了解 webpack 热更新原理【浏览倡议：1h】
[x] webpack 中那些最易混同的 5 个知识点【浏览倡议：30min】
[x] 前端构建秘籍【浏览倡议：30min】

2018 年文章：

[x] 手把手教你撸一个 Webpack Loader【浏览倡议：1h】
[x] 手把手教你撸一个繁难的 webpack【浏览倡议：30min】
[x] Webpack 揭秘——走向高阶前端的必经之路【浏览倡议：30min】
[x] webpack 详解【浏览倡议：1h】
[x] webpack4- 用之初体验，一起敲它十一遍【浏览倡议：30min】
[x] 带你走进 webpack 世界，成为 webpack 头等玩家。【浏览倡议：20min】
[x]【webpack 进阶】你真的把握了 loader 么？- loader 十问【浏览倡议：20min】
[x] webpack 打包之后的文件过大的解决办法【浏览倡议：10min】
[x] 基于 Webpack 搭建 React 开发环境【浏览倡议：10min】

2017 文章：

[x] Webpack 源码（一）—— Tapable 和事件流【浏览倡议：10min】

2019 年文章：

[x] Webpack 优化——将你的构建效率提速翻倍【浏览倡议：10min】
[x] 性能优化篇 —Webpack 构建速度优化【浏览倡议：10min】
[x] 应用 webpack4 晋升 180% 编译速度【浏览倡议：10min】
[x] 多过程并行压缩代码【浏览倡议：5min】
[x] webpack 4: Code Splitting 和 chunks 切分优化【浏览倡议：5min】

2018 年文章：

[x] Tree-Shaking 性能优化实际 – 原理篇【浏览倡议：10min】
[x] 体积缩小 80%！开释 webpack tree-shaking 的真正后劲【浏览倡议：10min】
[x] 你的 Tree-Shaking 并没什么卵用【浏览倡议：5min】
[x] webpack 如何通过作用域剖析打消无用代码【浏览倡议：5min】
[x] 让你的 Webpack 腾飞—考拉会员后盾 Webpack 优化实战【浏览倡议：5min】
[x] webpack dllPlugin 打包体积和速度优化【浏览倡议：5min】
[x] webpack 优化之 code splitting【浏览倡议：5min】

2017 年文章：

[x] Webpack 打包优化之速度篇【浏览倡议：5min】
[x] 减速 Webpack- 放大文件搜寻范畴【浏览倡议：5min】
[x] Webpack 大法之 Code Splitting【浏览倡议：5min】

[x] webpack 的 scope hoisting 是什么？【浏览倡议：5min】
[x] 通过 Scope Hoisting 优化 Webpack 输入【浏览倡议：5min】
[x]【Webpack】654- 了不起的 Webpack Scope Hoisting 学习指南【浏览倡议：5min】

[x] Tree Shaking – Webpack 5.0.0-rc.0【浏览倡议：仅供参考】
[x] Webpack 4 Tree Shaking 终极优化指南【浏览倡议：30min】
[x] Tree-Shaking 性能优化实际 – 原理篇 – 2018【浏览倡议：仅供参考】
[x] Webpack4: Tree-shaking 深度解析 – 2019【浏览倡议：仅供参考】

[x] Vue Webpack 打包优化——路由懒加载（按需加载）原理解说及应用办法阐明【浏览倡议：20min】
[x] 懒加载 – Webpack v5.0.0-rc.0【浏览倡议：5min】
[x] webpack 的代码宰割（路由懒加载同理）【浏览倡议：10min】

一 目录

二 温习知识点

2.1 Babel

2.2 Webpack

2.3 Webpack – Tree Shaking

2.4 Webpack – Scope Hoisting

2.5 Webpack 简略实现

2.6 Webpack 性能优化

三 参考文献

3.1 杂

3.2 Babel

3.3 模板引擎

3.4 前端监控

四 Webpack 参考文献

4.1 Webpack 系列文章

4.2 Webpack 性能优化

4.3 Scope Hoisting

4.4 Tree Shaking

4.5 懒加载

一目录

二温习知识点

三参考文献