feat: add time options to set loading network speed, latency and message

README.md

@@ -14,7 +14,7 @@ if the cost exceeds the limit.
   that use their own bundler or small npm libraries with many files.
 * Can calculate **the time** it would take a browser
   to download and **execute** your JS. Time is a much more accurate
-  and understandable metric compared to the size in bytes.
+  and understandable metric compared to the size in bytes. Additionally, you can customize it via config for every check with network speed, latency and so on.
 * Calculations include **all dependencies and polyfills**
   used in your JS.
 

fixtures/time-latency/package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "name": "time-latency",
+  "devDependencies": {
+    "@size-limit/time": ">= 0.0.0",
+    "size-limit": ">= 0.0.0"
+  },
+  "size-limit": [
+    {
+      "path": "index.js",
+      "time": {
+        "latency": "200 ms"
+      }
+    },
+    {
+      "time": {
+        "latency": "2.35 s"
+      }
+    }
+  ]
+}

fixtures/time-network-speed/package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "name": "time-network-speed",
+  "devDependencies": {
+    "@size-limit/time": ">= 0.0.0",
+    "size-limit": ">= 0.0.0"
+  },
+  "size-limit": [
+    {
+      "path": "index.js",
+      "time": {
+        "networkSpeed": "20 B"
+      }
+    },
+    {
+      "time": {
+        "networkSpeed": "20 kB"
+      }
+    }
+  ]
+}

packages/size-limit/calc.js

@@ -46,7 +46,7 @@ export default async function calc(plugins, config, createSpinner) {
       check.passed = check.sizeLimit >= check.size
     }
     if (typeof check.timeLimit !== 'undefined') {
-      check.passed = check.timeLimit >= check.time
+      check.passed = check.timeLimit >= check.totalTime
     }
     if (check.files && !check.files.length && check.path) {
       check.missed = true

packages/size-limit/create-reporter.js

@@ -153,12 +153,14 @@ function createHumanReporter(process, isSilentMode = false) {
           rows.push(['Size', sizeString, sizeNote])
         }
         if (typeof check.loadTime !== 'undefined') {
-          rows.push(['Loading time', formatTime(check.loadTime), 'on slow 3G'])
+          let description =
+            (check.time && check.time.loadingMessage) || 'on slow 3G'
+          rows.push(['Loading time', formatTime(check.loadTime), description])
         }
         if (typeof check.runTime !== 'undefined') {
           rows.push(
             ['Running time', formatTime(check.runTime), 'on Snapdragon 410'],
-            ['Total time', formatTime(check.time)]
+            ['Total time', formatTime(check.totalTime)]
           )
         }
 

packages/size-limit/get-config.js

@@ -28,6 +28,7 @@ let OPTIONS = {
   name: true,
   path: true,
   running: 'time',
+  time: 'time',
   uiReports: 'webpack',
   webpack: 'webpack'
 }
@@ -42,6 +43,14 @@ function isStringsOrUndefined(value) {
   return type === 'undefined' || type === 'string' || isStrings(value)
 }
 
+function endsWithMs(value) {
+  return / ?ms/i.test(value)
+}
+
+function endsWithS(value) {
+  return / ?s/i.test(value)
+}
+
 function checkChecks(plugins, checks) {
   if (!Array.isArray(checks)) {
     throw new SizeLimitError('noArrayConfig')
@@ -181,9 +190,9 @@ export default async function getConfig(plugins, process, args, pkg) {
     if (!check.name) check.name = toName(check.entry || check.files, config.cwd)
     if (args.limit) check.limit = args.limit
     if (check.limit) {
-      if (/ ?ms/i.test(check.limit)) {
+      if (endsWithMs(check.limit)) {
         check.timeLimit = parseFloat(check.limit) / 1000
-      } else if (/ ?s/i.test(check.limit)) {
+      } else if (endsWithS(check.limit)) {
         check.timeLimit = parseFloat(check.limit)
       } else {
         check.sizeLimit = bytes.parse(check.limit)
@@ -215,6 +224,19 @@ export default async function getConfig(plugins, process, args, pkg) {
       }
       check.import = imports
     }
+    if (check.time) {
+      let { latency, networkSpeed } = check.time
+      if (latency) {
+        if (endsWithMs(latency)) {
+          check.time.latency = parseFloat(latency) / 1000
+        } else {
+          check.time.latency = parseFloat(latency) || 0
+        }
+      }
+      if (networkSpeed) {
+        check.time.networkSpeed = bytes.parse(networkSpeed)
+      }
+    }
   }
 
   return config

packages/size-limit/index.d.ts

@@ -96,6 +96,38 @@ export interface Check {
    * With `false` it will disable webpack.
    */
   webpack?: boolean
+
+  /**
+   * Options for `@size-limit/time` plugin.
+   */
+  time?: TimeOptions
+}
+
+/**
+ * Represents the options for the size-limit check time property to customize `@size-limit/time` plugin.
+ */
+export interface TimeOptions {
+  /**
+   * A network speed to calculate loading time of files.
+   * It should be a string with a number and unit, separated by a space.
+   * Format: `100 B`, `10 kB`.
+   * @default "50 kB"
+   */
+  networkSpeed?: string
+
+  /**
+   * Delay for calculating loading time that simulates network latency
+   * It should be a string with a number and unit, separated by a space.
+   * Format: `500 ms`, `1 s`.
+   * @default: "0"
+   */
+  latency: string
+
+  /**
+   * A message for loading time details
+   * @default "on slow 3G"
+   */
+  loadingMessage?: string
 }
 
 export type SizeLimitConfig = Check[]

packages/size-limit/test/__snapshots__/create-reporter.test.js.snap

@@ -137,6 +137,22 @@ exports[`renders list of success checks in silent mode 1`] = `
 "
 `;
 
+exports[`renders loading time with custom message from time options for every check 1`] = `
+"  
+  loading message 1
+  Size:         10 B
+  Loading time: 200 ms for ~1000 users per month
+  Running time: 400 ms on Snapdragon 410
+  Total time:   1.4 s
+
+  loading message 2
+  Loading time: 200 ms on slow 3G
+  Running time: 300 ms on Snapdragon 410
+  Total time:   NaN ms
+
+"
+`;
+
 exports[`renders result for file with gzip 1`] = `
 "  
   Size limit: 99 B

packages/size-limit/test/__snapshots__/run.test.js.snap

@@ -90,7 +90,7 @@ exports[`shows debug 1`] = `
       "size": 123,
       "loadTime": 0.01,
       "runTime": 1,
-      "time": 1.01,
+      "totalTime": 1.01,
       "passed": true
     }
   ],

packages/size-limit/test/create-reporter.test.js

@@ -31,7 +31,7 @@ it('renders results', () => {
           name: 'limitless',
           runTime: 0.5,
           size: 10,
-          time: 0.6
+          totalTime: 0.6
         },
         {
           loadTime: 1,
@@ -40,7 +40,7 @@ it('renders results', () => {
           runTime: 2,
           size: 102400,
           sizeLimit: 102400,
-          time: 3
+          totalTime: 3
         },
         {
           gzip: false,
@@ -49,8 +49,8 @@ it('renders results', () => {
           passed: true,
           runTime: 2,
           size: 102400,
-          time: 3,
-          timeLimit: 4
+          timeLimit: 4,
+          totalTime: 3
         }
       ]
     })
@@ -69,7 +69,7 @@ it('renders list of success checks in silent mode', () => {
             name: 'limitless',
             runTime: 0.5,
             size: 10,
-            time: 0.6
+            totalTime: 0.6
           },
           {
             loadTime: 1,
@@ -78,7 +78,7 @@ it('renders list of success checks in silent mode', () => {
             runTime: 2,
             size: 102400,
             sizeLimit: 102400,
-            time: 3
+            totalTime: 3
           }
         ]
       },
@@ -132,7 +132,7 @@ it('renders list of failed and success checks in silent mode', () => {
             name: 'limitless',
             runTime: 0.5,
             size: 10,
-            time: 0.6
+            totalTime: 0.6
           },
           {
             loadTime: 1,
@@ -141,7 +141,7 @@ it('renders list of failed and success checks in silent mode', () => {
             runTime: 2,
             size: 102400,
             sizeLimit: 102400,
-            time: 3
+            totalTime: 3
           },
           {
             name: 'big fail',
@@ -291,8 +291,8 @@ it('renders config-less result', () => {
           passed: false,
           runTime: 0.3,
           size: 1000,
-          time: 0.5,
-          timeLimit: 0.5
+          timeLimit: 0.5,
+          totalTime: 0.5
         }
       ],
       failed: true
@@ -317,8 +317,8 @@ it('renders JSON results', () => {
             path: '/b',
             runTime: 0.3,
             size: 1000,
-            time: 0.5,
-            timeLimit: 10
+            timeLimit: 10,
+            totalTime: 0.5
           }
         ],
         failed: true
@@ -372,3 +372,28 @@ it('renders Webpack stats help message', () => {
     })
   ).toMatchSnapshot()
 })
+
+it('renders loading time with custom message from time options for every check', () => {
+  expect(
+    results(['time'], {
+      checks: [
+        {
+          loadTime: 0.2,
+          name: 'loading message 1',
+          passed: true,
+          runTime: 0.4,
+          size: 10,
+          time: { loadingMessage: 'for ~1000 users per month' },
+          totalTime: 1.4
+        },
+        {
+          loadTime: 0.2,
+          name: 'loading message 2',
+          passed: true,
+          runTime: 0.3,
+          time: { loadingMessage: '' }
+        }
+      ]
+    })
+  ).toMatchSnapshot()
+})

packages/size-limit/test/get-config.test.js

@@ -429,6 +429,48 @@ it('normalizes import', async () => {
   })
 })
 
+it('normalizes networkSpeed option for time plugin', async () => {
+  let cwd = 'time-network-speed'
+  expect(await check(cwd)).toEqual({
+    checks: [
+      {
+        files: [fixture(cwd, 'index.js')],
+        name: 'index.js',
+        path: 'index.js',
+        time: { networkSpeed: 20 }
+      },
+      {
+        files: [fixture(cwd, 'index.js')],
+        name: 'index.js',
+        time: { networkSpeed: 20000 }
+      }
+    ],
+    configPath: 'package.json',
+    cwd: fixture(cwd)
+  })
+})
+
+it('normalizes latency option for time plugin', async () => {
+  let cwd = 'time-latency'
+  expect(await check(cwd)).toEqual({
+    checks: [
+      {
+        files: [fixture(cwd, 'index.js')],
+        name: 'index.js',
+        path: 'index.js',
+        time: { latency: 0.2 }
+      },
+      {
+        files: [fixture(cwd, 'index.js')],
+        name: 'index.js',
+        time: { latency: 2.35 }
+      }
+    ],
+    configPath: 'package.json',
+    cwd: fixture(cwd)
+  })
+})
+
 const allConfigFileExtensions = ['mjs', 'js', 'cjs', 'ts', 'mts', 'cts']
 const exportTypes = [
   { exportSyntax: 'export default', moduleType: 'esm' },