前端构建
-
cjs:
exports.sum = (x,y)=>x+y;
const {sum} = require('./sum') -
esm :静态导入 针对无用tree shaking
export const sum = (x,y)=>x+y;
import {sum} from './sum' -
umd：universal module definition
前端权限管理的模型
- ACL：基于用户的权限管理模型
- RBAC:基于角色的权限管理模型
- ABAC:基于属性的权限管理模型
minify代码压缩
AST -> AST terser swc
- 去除多余字符
- 压缩变量名
- 逻辑解析，合并声明
- 预编译 pre-compiler
package-lock.json
锁版本->开发环境 生产环境
Loader和Plugin的区别
Loader本质是函数 对接收到的内容进行转换，返回转换后的结果，webpack只认识js,对其他类型的资源进行转移的预处理工作
loader:module.rules配置，类型是数组，
Plugin:插件，基于事件流框架Tapable，扩展webpack功能，webpack运行生命周期中会广播很多事件，plugin可以监听这些事件，在合适事件通过webpack api改变输出结果。
plugin:单独配置，类型数组 plugin实例，参数通过构造函数传入。
常见Loader
raw-loader:加载文件原始内容
file-loader:把文件输出到文件夹中，在代码中通过相对url去引用输出的文件（图片 字体）
url-loader:与file-loader类型，设置阈值 大于就交给file-loader处理
source-map-loader:加载额外的source-map文件 方便断点调试
image-loader:加载并压缩图片文件
json-loader:加载json文件
babel-loader:将es6转换成es5
ts-loader:将ts语言转换成js
sass-loader/less-loader:转换css
css-loader:加载css
style-loader:把css注入到js中,通过dom操作加载css
postcss-loader:扩展css语法，使用下一代css
eslint-loader/tslint-loader:代码检查
vue-loader:加载vue.js 单文件组件
常见的Plugin
define-plufin:定义环境变量
ignore-plugin:忽略部分文件
html-wepack-plugin:简化html文件创建
uglifyjs-wepack-plugin:压缩js
mini-css-extract-plugin:分离样式文件，css提取为单独文件，支持按需加载
clean-webpack-plugin:目录清理
webpack-bundle-analyzer:可视化webpack输出文件的体积
speed-measure-webpack-plugin:看到美每个loader plugin执行耗时
Webpack 构建流程
运行流程 串行
1、初始化参数：从配置文件和shell语句中读取并且合并参数，得到最终的参数
2、开始编译：初始化Compiler加载所有配置插件，执行对象run方法，开始编译
3、确定入口：entry找到所有入口
4、编译模块：调用所有loader对模块进行翻译，找出模块依赖的模块，在递归本步骤直到所有入口依赖的文件都经过处理
5、完成模块编译：得到每个模块被翻译后的最终内容以及他们之间的依赖关系
6、输出资源：包含多个模块的chunk,每个chunk转换成单独的文件加入到输出列表中，可以修改输出内容
7、输出完成：根据配置确定输出的路径和文件名，把文件内容写出到文件系统
webpack 提高效率的插件
1、webpack-dashboard 更友好的展示相关包的信息
2、webpack-merge 提取公共配置，减少重复配置代码
3、speed-measure-webpack-plugin 分析loader和plugin的耗时，分析构建过程中的性能瓶颈
4、size-plugin 监控资源体积变化
5、HotModuleReplacementPlugin 模块热替换
文件指纹
打包后输出的文件名后缀
1、hash 和整个项目构建相关的 只有项目文件改变，项目hash值改变
2、ChunkHash Chunk相关 不同entry产生不同的chunkhash
3、ContentHash 根据文件内容定义hash 文件内容不变 则contenthash不变
优化Webpack的构建速度
1、使用高版本Webpack和Nodejs
2、多进程/多实例构建thread-loader
3、压缩代码
多进程并行压缩
webpack-paralle-uglify-plugin
terser-webpack-plugin开发parallel
mini-css-extract-plugin
4、图片压缩
imagemin
image-webpack-plugin
5、缩小打包作用域
exclude/include确定loader规则范围
resolve.extensions
resolve.modules
6、提取页面公共资源
基础包分离
使用html-webpack-externals-plugin 基础包通过cdn引入，不打入bundle中
使用splitchunksplugin 进行公共脚本 基础包 页面公共文件分离
7、充分利用缓存提升二次构建速度
babel-loader开启缓存
terser-webpack-plugin 开启缓存
cache-loader或者hard-source-webpack-plugin
8、tree shaking
没有用过的模块进行标记，从最终bundle中去掉
编写Loader
支持链式调用 遵守单一职责 负责自己所需负责的事
Nodejs中 调用nodejs api或者安装第三方模块调用
传给loader的原内容是utf-8编码的字符串
尽可能异步化loader 计算量小同步也可以
loader无状态 不应该在loader中保留状态
使用loader-utils schema-utils工具
加载本地loader方法
编写plugin
webpack运行生命周期会广播很多事件,plugin监听事件
特定阶段勾入想要添加的自定义内容
通过tapable事件流机制 保证插件有序性 扩展性良好
compiler 暴露钩子 整个生命周期相关
compliation 暴露模块和依赖有关的颗粒度更小的事件钩子
plugin需要在原型上绑定apply方法 才能访问compiler实例
插件接收commpiler compliation都是同一个引用
找到合适的事件点 完成想要的内容
babel原理
三部分
解析 将代码转换成AST
转换 访问AST节点 变换操作生成新的AST
生成 以新的AST为基础生成代码
source map是什么 生产环境怎么用
source-map 将编译、打包、压缩后的代码映射会源码的过程
文件监听原理
源码发生变化 自动重新构建新的文件
两种监听模式
-watch
-配置webpack.config.js watch:true
热更新原理
热更新 无需刷新浏览器 可将新模块替换掉旧模块
chunk diff
维护websocket
WDS浏览器
本地资源发生变化 WDS推送更新hash
对WDS发起ajax
Webpack事件机制
常见事件
before-run:开始执行构建之前触发，可以用于清理上一次构建的临时文件或状态
run:开始执行构建触发
before-compile:开始编译代码前触发，可以用于添加一些额外的编译配置或者预处理代码
compile:开始编译 可用于监听编译过程或者编译处理错误
this-compilation:创建新的Compilation对象触发，Compilation对象代表当前编译过程中的所有状态和信息
compilation:编译代码期间触发，可以用于监听编译过程或者处理编译错误
emit:输出文件之前触发，修改输出文件或者一些附加文件
after-emit:输出文件后触发 用于清理中间文件
done：构建完成时触发，用于生成构建报告
webpack事件机制Tapabel实现核心类 封装了事件订阅发布机制Compiler Compilation都是Tapable类的实例对象
webpack核心概念
1、entry指定从哪个模块开始构建依赖图 一个或多个入口模块
2、output 指定输出路径或文件名 输出一个或多个文件
3、loaders 处理各种类型文件 转化为有效模块 ES6+ 转译为浏览器可识别的ES5代码
4、plugins:可执行更广泛的功能模块，优化打包结果、资源管理、环境变量注入等
5、mode development production none
6、code splitting 拆分为多个单独文件，通过配置解析规则，指定如何查找以及处理不同类型的模块
7、Resolve 模块引用关系解析模块路径
8、devServer:热更新 自动刷新页面 提高开发效率