美文网首页
前端构建工具指标

前端构建工具指标

作者: DoEmpty | 来源:发表于2020-12-26 16:42 被阅读0次

    Tooling.Report

    Code splitting 代码分割

    是否能够导出公共模块,避免重复打包;
    以及在页面加载运行时,实现最合理的按需加载策略

    Hashing 哈希

    对打包资源进行版本信息映射,最大化的利用缓存机制(比如webpackdevserver的热更新)

    如何区分webpack中的hash/chunkhash/contenthash
    • hash反映的是项目的构建版本,同一次构建过程中生成的hash都是一样的
      hash策略带来的问题是:即使某个模块的内容压根没有改变,但是重新构建后会产生新的hash值,使得缓存命中率较低
    • chunkhash会根据入口文件(Entry)进行依赖解析
      chunkhash带来的问题是:如果index.js依赖一些文件,index.js发生变化即使其他依赖文件没有变动,也会重新对齐进行构建
    • contenthash则会根据文件具体内容生成hash值

    Importing modules 依赖机制

    前端现存CommonJS、AMD、ESM等不同的模块化规范,所以构建工具需要具有兼容这些规范的能力
    另外,由于npm的存在,构建工具也得具有根据npm从node modules引入依赖模块的能力

    Non-Javascript resources 非JavaScript资源导入的支持能力

    诸如对html,css,image等的导入

    Transformations 转义

    对于JavaScript的代码压缩,无用代码的删除
    但是对于类似jsx、.vue文件、es相关代码的编译,不会内置到构建工具中,而是利用babel等社区能力,融合到构建流程中

    相关文章

      网友评论

          本文标题:前端构建工具指标

          本文链接:https://www.haomeiwen.com/subject/xkegnktx.html