CD's blog CD's blog
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

CD_wOw

内卷的行情,到不了的梦
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 配置

    • 配置
    • 使用不同语言进行配置(configuration languages)
    • 多种配置类型(configuration types)
    • 入口和上下文(entry and context)
    • 输出(output)
    • 模块(module)
    • 解析(resolve)
    • 插件(plugins)
    • 开发中 Server(devServer)
    • devtool
    • 构建目标(targets)
    • watch 和 watchOptions
    • 外部扩展(externals)
    • 性能(performance)
      • performance
      • performance.hints
      • performance.maxEntrypointSize
      • performance.maxAssetSize
      • performance.assetFilter
    • Node
    • 统计信息(stats)
    • 其它选项(other options)
  • 指南(实例)

  • 《Webpack》笔记
  • 配置
CD_wOw
2020-12-15
目录

性能(performance)

这些选项可以控制 webpack 如何通知「资源(asset)和入口起点超过指定文件限制」。 此功能受到 webpack 性能评估 (opens new window)的启发。

# performance

type: object

配置如何展示性能提示。例如,如果一个资源超过 250kb,webpack 会对此输出一个警告来通知你。

# performance.hints

type: false | "error" | "warning"

打开/关闭提示。此外,当找到提示时,告诉 webpack 抛出一个错误或警告。此属性默认设置为 "warning"。

给定一个创建后超过 250kb 的资源:

performance: {
  hints: false
}
1
2
3

不展示警告或错误提示。

performance: {
  hints: "warning"
}
1
2
3

将展示一条警告,通知你这是体积大的资源。在开发环境,我们推荐这样。

performance: {
  hints: "error"
}
1
2
3

将展示一条错误,通知你这是体积大的资源。在生产环境构建时,我们推荐使用 hints: "error",有助于防止把体积巨大的 bundle 部署到生产环境,从而影响网页的性能。

# performance.maxEntrypointSize

type: int

入口起点表示针对指定的入口,对于所有资源,要充分利用初始加载时(initial load time)期间。此选项根据入口起点的最大体积,控制 webpack 何时生成性能提示。默认值是:250000 (bytes)。

performance: {
  maxEntrypointSize: 400000
}
1
2
3

# performance.maxAssetSize

type: int

资源(asset)是从 webpack 生成的任何文件。此选项根据单个资源体积,控制 webpack 何时生成性能提示。默认值是:250000 (bytes)。

performance: {
  maxAssetSize: 100000
}
1
2
3

# performance.assetFilter

type: Function

此属性允许 webpack 控制用于计算性能提示的文件。默认函数如下:

function(assetFilename) {
    return !(/\.map$/.test(assetFilename))
};
1
2
3

你可以通过传递自己的函数来覆盖此属性:

performance: {
  assetFilter: function(assetFilename) {
    return assetFilename.endsWith('.js');
  }
}
1
2
3
4
5

以上示例将只给出 .js 文件的性能提示。

编辑 (opens new window)
#Webpack
上次更新: 2021/08/22, 01:09:59
外部扩展(externals)
Node

← 外部扩展(externals) Node→

最近更新
01
gsap动画库学习笔记 - 持续~
06-05
02
远程组件加载方案笔记
05-03
03
小程序使用笔记
03-29
更多文章>
Theme by Vdoing | Copyright © 2020-2023 CD | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式