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 篇文章,感谢小伙伴们的支持。

2.1 Babel

返回目录

文章地址:Babel

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

2.2 Webpack

返回目录

文章地址:Webpack

  • [x] 是什么:本质是一个模块打包器,其工作是将每个模块打包成相应的 bundle
  • [x] 核心概念modeentryoutputloaderplugin
  • [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:将编译、打包、压缩后的代码映射回源代码的过程

2.3 Webpack - Tree Shaking

返回目录

文章地址: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

返回目录

文章地址: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 为例,可以通过 includeexclude 帮助我们避免 node_modules 这类庞大文件夹]
  • [x] 缓存cache-loaderuglifyjs-webpack-plugin,将编译结果写进硬盘缓存,下次文件如果没有变化则直接拉取缓存
  • [x] 多进程Happypackthread-loader,将任务分解成多个子进程去并发执行,提高打包效率
  • [x] 多进程压缩Webpack 自带的 UglifyJSWebpackPlugin 压缩插件是单线程运行的,而 TerserWebpackPlugin 可以并行执行(多线程)
  • [x] 静态资源分离CommonsChunkPlugins 每次构建都会重新构建 vendor,出于效率问题使用 DllPlugin 可以将第三方库单独打包到一个文件中,只有依赖自身发生版本变化才会重新打包
  • [x] 打包资源压缩

    • [x] JS 压缩:UglifyJSWebpackPluginTerserWebpackPlugin
    • [x] HTML 压缩:HtmlWebpackPlugin
    • [x] CSS 压缩:MiniCssExtractPlugin
    • [x] 图片压缩:ImageWebpackPlugin
    • [x] Gzip 压缩:不包括图片
  • [x] Tree Shaking
  • [x] Scope Hoisiting
  • [x] 按需加载

三 参考文献

返回目录

本系列参考文献有 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 国际 许可协议 进行许可。<br/>基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/>本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。

一个充满探索欲,喜欢折腾,乐于扩展自己知识面的终身学习斜杠程序员

355 声望
24 粉丝
0 条评论
推荐阅读
迁移 Vue v2.x 版本到 Vite
人生无常,大肠包小肠~在接近年底的时候,有一个 Vue 项目,需要从中抽取 2 个模块出来。然后想着新建项目,Vue CLI 也是学,Vite 也是学,于是哼次哼次用上了 Vite,结果开始了一路的 bug 挨打之旅……警告:本文...

jsliang9阅读 618

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

一个充满探索欲,喜欢折腾,乐于扩展自己知识面的终身学习斜杠程序员

355 声望
24 粉丝
宣传栏