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

jsliang
4,962 阅读11分钟

一 目录

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

目录
一 目录
二 复习知识点
 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 篇文章，感谢小伙伴们的支持。

2.1 Babel

返回目录

文章地址：Babel

  • AST：抽象语法树，是源代码语法结构的一种抽象表示
  • 原理：将现有的 ES6+ 代码，先通过 词法分析 和 语法分析 之后 解析 为 AST，然后将这份 AST 转换 为我们需要形式的 AST，最后将这个 AST 再转换成 ES5 或者期望格式的内容。

2.2 Webpack

返回目录

文章地址：Webpack

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

2.3 Webpack - Tree Shaking

返回目录

文章地址：Webpack - Tree Shaking

  • Tree Shaking：通过在 package.json 中开启 sideEffects，将 ES6 模板语法的 import 行为导入的文件都标记为无副作用，然后开启 -p 的生产模式，让 Webpack 调用内部的 UglifyJSWebpackPlugin 来进行删除未引用代码。
  • dead-code：代码不会被执行，或者执行结果不会被用到，或者代码只会影响死变量的，叫做 dead-code
  • 副作用：如果在 import 导入时就会做一些特殊行为的代码，称之为有副作用的代码，例如 polyfill 会影响全局作用域
  • 静态分析：ES6 模板语法可以在不执行代码的情况下，从字面量上对代码进行分析。静态分析是 Tree Shaking 的基础。而 require 是需要执行了才知道引用内容的，就不能通过静态分析做优化

2.4 Webpack - Scope Hoisting

返回目录

文章地址：Webpack - Scope Hoisting

  • Scope Hoisting：Webpack3 添加的功能，作用域提升。原理是分析模块的引用关系，将打散的模块合并到同一个函数中，需要 ES6 模板语法进行静态分析

2.5 Webpack 简单实现

返回目录

文章地址：Webpack 简单实现

  • 利用 babel 完成代码转换，并生成单个文件的依赖
  • 生成依赖图谱
  • 生成最后打包代码

2.6 Webpack 性能优化

返回目录

文章地址：Webpack 性能优化

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

三 参考文献

返回目录

本系列参考文献有 79 篇.

3.1 杂

返回目录

2020：

2019：

2018：

3.2 Babel

返回目录

3.3 模板引擎

返回目录

3.4 前端监控

返回目录

四 Webpack 参考文献

返回目录

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

4.1 Webpack 系列文章

返回目录

其他：

2020 年文章：

2019 年文章：

2018 年文章：

2017 文章：

4.2 Webpack 性能优化

返回目录

2019 年文章：

2018 年文章：

2017 年文章：

4.3 Scope Hoisting

返回目录

4.4 Tree Shaking

返回目录

4.5 懒加载

返回目录

jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。
基于 github.com/LiangJunron… 上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。

avatar
文章
阅读
粉丝