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.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.增加了模块联邦
6.webpack4在编译上做了优化用了v8-compiler-cache webpack5用了sparkplug
目标是减少Webpack的初始启动时间和构建时间。该插件采用了多个策略,包括缓存机制,以提高构建性能
v8如何执行一段js 代码
v8执行过程中既有解释器Ignition,有编译器TurboFan 1.将源代码进行词法分析、语法分析 2.ast词义分析转化为字节码 3.解释器Ignition解释执行ast生成字节码 字节码是介于AST和机器码之间的一种代码 4.编译器TurboFan执行字节码发现热点代码会通过转化为机器码 javascript性能优化需要做的三点: 1.提升单次脚本的执行速度,避免长任务占用主线程,可以使页面快速响应交互 2.避免大的内连脚本,解析和编译都会占用主线程 3.减少javascript文件大小,提高下载速度
注意解释器Ignition执行字节码,执行过程中发现热点代码通过Turbofan编译器转换为机器码