webpack5 和webpack4对比

 2.5融合了prepack,预先执行一边代码（有一套自己的js解释器）,使代码变得更小  原理：如果是纯函数走替换模型，替换模型能替换掉哪些看起来复杂的函数，+ js解释器就能做到prepack

相关：vite 原理 ： esbuild + koa ,webpack  esbuild-loader 快（取消了prepack webpack5自带prepack） esbuild没有prepack

esbuild是用go把js编译成二进制文件，所以快 ，Go版本的编译速度比Rust快100倍，运行速度快10％左右（忘记了确切的数字，仅做感性的粗略评估）。

相关 ：rollup parcel(swc,基于rust编译成二进制文件，使用worker进程启用多核编译，文件系统缓存) gulp microbundle webpack(prepack) vite(esbuild koa)

相关： entry多了用微前端

?

1 2 3 4 5 6

1.webpack5 assets 会自由选择替换url-loader 和file-loader 当然如果配置的话，对应的是assets/resource  发送一个文件导出url  assets/inline 转化成data uri assets/source 导出资源的源代码 对应raw-loader 2.移除了cache-loader，配置cache属性即可 3.webpack5增加了prepack 功能 4.去掉了polyfill 遇到过问题，项目启动不起来需要手动在resolve里配置fallback 或者安装polyfill 5.增加了模块联邦<br>6.webpack4在编译上做了优化用了v8-compiler-cache webpack5用了sparkplug<br>目标是减少Webpack的初始启动时间和构建时间。该插件采用了多个策略，包括缓存机制，以提高构建性能<br><br>

v8如何执行一段js 代码

?

1 2 3 4 5 6 7 8 9 10 11

v8执行过程中既有解释器Ignition,有编译器TurboFan   1.将源代码进行词法分析、语法分析 2.ast词义分析转化为字节码 3.解释器Ignition解释执行ast生成字节码  字节码是介于AST和机器码之间的一种代码 4.编译器TurboFan执行字节码发现热点代码会通过转化为机器码   javascript性能优化需要做的三点： 1.提升单次脚本的执行速度，避免长任务占用主线程，可以使页面快速响应交互 2.避免大的内连脚本，解析和编译都会占用主线程 3.减少javascript文件大小，提高下载速度

　　

　　

注意解释器Ignition执行字节码，执行过程中发现热点代码通过Turbofan编译器转换为机器码