• webpack5 和webpack4对比


    1. 4打包后的文件 0.js,删除文件缓存容易失效  5.文件指纹,路径拼接方式,也可以手动配置:optimization(chunkIds,moduleIds)deterministic可以md5加密名字 如果加了,两层md5    

    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

    v8如何执行一段js 代码

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

      

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

  • 相关阅读:
    .net core 3.1 过滤器(Filter) 和中间件和AOP面向切面拦截器
    socket通信框架——boost asio
    远程过程调用框架——gRPC
    数据序列化工具——flatbuffer
    springboot项目启动----8080端口被占用排雷经过
    如何配置HOSTS文件
    使用线程Callable实现分段获取一个url连接的资源数据
    Socket网络编程课件
    (6)优化TCP编写 服务器端同时支持多个客户端同时访问
    SpringBoot配置属性之Security
  • 原文地址:https://www.cnblogs.com/MDGE/p/15929746.html
Copyright © 2020-2023  润新知