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

前端构建工具指标

作者: 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等社区能力,融合到构建流程中

相关文章

  • 前端构建工具指标

    Tooling.Report[https://bundlers.tooling.report/] Code spl...

  • gulp

    叫做前端自动化构建工具,此类工具还有:grunt前端自动化构建工具 是什么?答: 自动化 less sass ...

  • Webpack 打包工具

    webpack 现代化前端最流行的一款 构建打包工具 前端构建打包工具的发展历史 grunt gulp fis w...

  • JavaScript高级自动化构建工具

    随着发展,前端代码复杂度和规模增加,使用构建工具实现自动化的前端开发流程很有必要。前端自动化构建工具具有代码压缩,...

  • 前端构建工具gulp(配合browser-sync实现浏览器自动

    示例代码地址 1. 什么是前端构建,有哪些常见的前端构建工具? 实现前端代码的编译(sass、less)、压缩、测...

  • 有哪些必看的前端 JS 库?

    前端自动化 前端构建工具 gulp – The streaming build system grunt – th...

  • FIS3和VueJS开发单页面应用

    FIS3是百度开发的一款前端构建工具。 FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步...

  • gulp && webpack

    gulp 前端自动化构建工具,此类的工具还有gruntwebpack 前端打包工具,打包:分析项目所依赖的内容,自...

  • webpack

    webpack webpack是一个前端构建工具,前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说,开...

  • 前端组件库

    0. 前端自动化(Workflow) 前端构建工具 Yeoman – a set of tools for aut...

网友评论

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

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