一 目录
不折腾的前端,和咸鱼有什么区别
二 复习知识点
返回目录
本系列参考 79 篇文章,总结出 6 篇文章,感谢小伙伴们的支持。
2.1 Babel
返回目录
文章地址:Babel
- [x] AST:抽象语法树,是源代码语法结构的一种抽象表示
- [x] 原理:将现有的 ES6+ 代码,先通过 词法分析 和 语法分析 之后 解析 为
AST
,然后将这份AST
转换 为我们需要形式的AST
,最后将这个AST
再转换成 ES5 或者期望格式的内容。
2.2 Webpack
返回目录
文章地址: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] 热更新
- [x] 开启方式:配置
devServer
,添加热更新插件HotModuleReplacementPlugin
- [x] 热更新原理
- [x] 开启方式:配置
[x] 3 种 hash:
- [x]
hash
:整个项目只要有文件更改,那就变更 - [x]
chunkhash
:某个入口对应的chunk
进行了变更,那就生成新的hash
值,不会影响其他chunk
- [x]
contenthash
:对应某个文件内容变更了,才会更换这个文件,生成新的hash
,而不会影响同一个模块下其他文件
- [x]
- [x] source map:将编译、打包、压缩后的代码映射回源代码的过程
2.3 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
是需要执行了才知道引用内容的,就不能通过静态分析做优化
2.4 Webpack - Scope Hoisting
返回目录
- [x] Scope Hoisting:Webpack3 添加的功能,作用域提升。原理是分析模块的引用关系,将打散的模块合并到同一个函数中,需要 ES6 模板语法进行静态分析
2.5 Webpack 简单实现
返回目录
文章地址:Webpack 简单实现
- [x] 利用
babel
完成代码转换,并生成单个文件的依赖 - [x] 生成依赖图谱
- [x] 生成最后打包代码
2.6 Webpack 性能优化
返回目录
文章地址: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] JS 压缩:
- [x] Tree Shaking
- [x] Scope Hoisiting
- [x] 按需加载
三 参考文献
返回目录
本系列参考文献有 79 篇.
3.1 杂
返回目录
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】
3.2 Babel
返回目录
- [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】
3.3 模板引擎
返回目录
- [x] 编写一个简单的JavaScript模板引擎【阅读建议:5min】
- [x] JavaScript模板引擎原理,几行代码的事儿阅读建议:10min】
- [x] Vue 模板编译原理【阅读建议:30min】
3.4 前端监控
返回目录
- [x] 5 分钟撸一个前端性能监控工具【阅读建议:10min】
- [x] 把前端监控做到极致【阅读建议:10min】
- [x] GMTC 大前端时代前端监控的最佳实践【阅读建议:20min】
- [x] 前端监控和前端埋点方案设计【阅读建议:20min】
- [x] 腾讯CDC团队:前端异常监控解决方案【阅读建议:20min】
- [x] 把前端监控做到极致【阅读建议:10min】
四 Webpack 参考文献
返回目录
Webpack 系列参考文献有 52 篇文章。
4.1 Webpack 系列文章
返回目录
其他:
- [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】
4.2 Webpack 性能优化
返回目录
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】
4.3 Scope Hoisting
返回目录
- [x] webpack 的 scope hoisting 是什么?【阅读建议:5min】
- [x] 通过Scope Hoisting优化Webpack输出【阅读建议:5min】
- [x] 【Webpack】654- 了不起的 Webpack Scope Hoisting 学习指南【阅读建议:5min】
4.4 Tree Shaking
返回目录
- [x] Tree Shaking - Webpack 5.0.0-rc.0【阅读建议:仅供参考】
- [x] Webpack 4 Tree Shaking 终极优化指南【阅读建议:30min】
- [x] Tree-Shaking性能优化实践 - 原理篇 - 2018【阅读建议:仅供参考】
- [x] Webpack4: Tree-shaking 深度解析 - 2019【阅读建议:仅供参考】
4.5 懒加载
返回目录
- [x] Vue Webpack 打包优化——路由懒加载(按需加载)原理讲解及使用方法说明【阅读建议:20min】
- [x] 懒加载 - Webpack v5.0.0-rc.0【阅读建议:5min】
- [x] webpack的代码分割(路由懒加载同理)【阅读建议:10min】
jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。<br/>基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/>本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。