From fa115e99cbdafee72a1bc9d33d350adcb01849d7 Mon Sep 17 00:00:00 2001 From: Thanat Wongsamut Date: Fri, 28 Jun 2024 18:48:41 +0700 Subject: [PATCH 01/10] [ADD] bundle size --- src/WebpackBuildStatsPlugin.ts | 18 ++++++++++++++++++ src/types.ts | 2 ++ src/viteBuildStatsPlugin.ts | 17 +++++++++++++++++ 3 files changed, 37 insertions(+) diff --git a/src/WebpackBuildStatsPlugin.ts b/src/WebpackBuildStatsPlugin.ts index 9cb6502..7c4b23a 100644 --- a/src/WebpackBuildStatsPlugin.ts +++ b/src/WebpackBuildStatsPlugin.ts @@ -4,11 +4,26 @@ import type { Compiler, Stats, StatsCompilation } from 'webpack'; export class WebpackBuildStatsPlugin { private readonly customIdentifier: string | undefined; + private bundleSize: number = 0; + constructor(customIdentifier: string | undefined = process.env.npm_lifecycle_event) { this.customIdentifier = customIdentifier; } apply(compiler: Compiler) { + compiler.hooks.emit.tapAsync('AgodaBuildStatsPlugin', (compilation, callback) => { + this.bundleSize = 0; + + for (const assetName in compilation.assets) { + if (compilation.assets.hasOwnProperty(assetName)) { + const asset = compilation.assets[assetName]; + this.bundleSize += asset.size(); + } + } + + callback(); + }); + compiler.hooks.done.tap('AgodaBuildStatsPlugin', async (stats: Stats) => { const jsonStats: StatsCompilation = stats.toJson(); @@ -19,8 +34,11 @@ export class WebpackBuildStatsPlugin { webpackVersion: jsonStats.version ?? null, nbrOfCachedModules: jsonStats.modules?.filter((m) => m.cached).length ?? 0, nbrOfRebuiltModules: jsonStats.modules?.filter((m) => m.built).length ?? 0, + bundleSize: this.bundleSize ?? 0, }; + // console.log(buildStats); + sendBuildData(buildStats); }); } diff --git a/src/types.ts b/src/types.ts index 1ea73af..dafa231 100644 --- a/src/types.ts +++ b/src/types.ts @@ -27,9 +27,11 @@ export interface WebpackBuildData extends CommonMetadata { compilationHash: string | null; nbrOfCachedModules: number; nbrOfRebuiltModules: number; + bundleSize: number; } export interface ViteBuildData extends CommonMetadata { type: 'vite'; viteVersion: string | null; + bundleSize: number; } diff --git a/src/viteBuildStatsPlugin.ts b/src/viteBuildStatsPlugin.ts index 67b73d0..268459c 100644 --- a/src/viteBuildStatsPlugin.ts +++ b/src/viteBuildStatsPlugin.ts @@ -1,6 +1,8 @@ import type { ViteBuildData } from './types'; import { type Plugin } from 'vite'; import { getCommonMetadata, sendBuildData } from './common'; +import { promises as fs } from 'fs'; +import path from 'path'; export function viteBuildStatsPlugin( customIdentifier: string | undefined = process.env.npm_lifecycle_event, @@ -8,6 +10,7 @@ export function viteBuildStatsPlugin( let buildStart: number; let buildEnd: number; let rollupVersion: string | undefined = undefined; + let bundleSize: number = 0; return { name: 'vite-plugin-agoda-build-reporter', @@ -18,13 +21,27 @@ export function viteBuildStatsPlugin( buildEnd: function () { buildEnd = Date.now(); }, + generateBundle: async function (options, bundle) { + for (const [fileName, assetInfo] of Object.entries(bundle)) { + const filePath = path.join(options.dir || '', fileName); + try { + const stats = await fs.stat(filePath); + bundleSize += stats.size; + } catch (err) { + console.error(`Error reading file size for ${fileName}:`, err); + } + } + }, closeBundle: async function () { const buildStats: ViteBuildData = { ...getCommonMetadata(buildEnd - buildStart, customIdentifier), type: 'vite', viteVersion: rollupVersion ?? null, + bundleSize, }; + // console.log(buildStats); + sendBuildData(buildStats); }, }; From 1343ef15a19094f3f3864e821e25eaf6f1a48597 Mon Sep 17 00:00:00 2001 From: Thanat Wongsamut Date: Fri, 28 Jun 2024 22:44:33 +0700 Subject: [PATCH 02/10] [ADD] bundle files debugging --- src/WebpackBuildStatsPlugin.ts | 4 ++++ src/types.ts | 2 ++ src/viteBuildStatsPlugin.ts | 5 ++++- 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/WebpackBuildStatsPlugin.ts b/src/WebpackBuildStatsPlugin.ts index 7c4b23a..77bf9a4 100644 --- a/src/WebpackBuildStatsPlugin.ts +++ b/src/WebpackBuildStatsPlugin.ts @@ -4,6 +4,7 @@ import type { Compiler, Stats, StatsCompilation } from 'webpack'; export class WebpackBuildStatsPlugin { private readonly customIdentifier: string | undefined; + private bundleFiles: Record = {}; private bundleSize: number = 0; constructor(customIdentifier: string | undefined = process.env.npm_lifecycle_event) { @@ -13,10 +14,12 @@ export class WebpackBuildStatsPlugin { apply(compiler: Compiler) { compiler.hooks.emit.tapAsync('AgodaBuildStatsPlugin', (compilation, callback) => { this.bundleSize = 0; + this.bundleFiles = {}; for (const assetName in compilation.assets) { if (compilation.assets.hasOwnProperty(assetName)) { const asset = compilation.assets[assetName]; + this.bundleFiles[assetName] = asset.size(); this.bundleSize += asset.size(); } } @@ -34,6 +37,7 @@ export class WebpackBuildStatsPlugin { webpackVersion: jsonStats.version ?? null, nbrOfCachedModules: jsonStats.modules?.filter((m) => m.cached).length ?? 0, nbrOfRebuiltModules: jsonStats.modules?.filter((m) => m.built).length ?? 0, + bundleFiles: this.bundleFiles ?? {}, bundleSize: this.bundleSize ?? 0, }; diff --git a/src/types.ts b/src/types.ts index dafa231..3525b55 100644 --- a/src/types.ts +++ b/src/types.ts @@ -27,11 +27,13 @@ export interface WebpackBuildData extends CommonMetadata { compilationHash: string | null; nbrOfCachedModules: number; nbrOfRebuiltModules: number; + bundleFiles: Record; bundleSize: number; } export interface ViteBuildData extends CommonMetadata { type: 'vite'; viteVersion: string | null; + bundleFiles: Record; bundleSize: number; } diff --git a/src/viteBuildStatsPlugin.ts b/src/viteBuildStatsPlugin.ts index 268459c..dff1710 100644 --- a/src/viteBuildStatsPlugin.ts +++ b/src/viteBuildStatsPlugin.ts @@ -10,6 +10,7 @@ export function viteBuildStatsPlugin( let buildStart: number; let buildEnd: number; let rollupVersion: string | undefined = undefined; + let bundleFiles: Record = {}; let bundleSize: number = 0; return { @@ -21,11 +22,12 @@ export function viteBuildStatsPlugin( buildEnd: function () { buildEnd = Date.now(); }, - generateBundle: async function (options, bundle) { + writeBundle: async function (options, bundle) { for (const [fileName, assetInfo] of Object.entries(bundle)) { const filePath = path.join(options.dir || '', fileName); try { const stats = await fs.stat(filePath); + bundleFiles[fileName] = stats.size; bundleSize += stats.size; } catch (err) { console.error(`Error reading file size for ${fileName}:`, err); @@ -37,6 +39,7 @@ export function viteBuildStatsPlugin( ...getCommonMetadata(buildEnd - buildStart, customIdentifier), type: 'vite', viteVersion: rollupVersion ?? null, + bundleFiles, bundleSize, }; From 084ef1ea341a951a7b1ac8ad122e341201bbc829 Mon Sep 17 00:00:00 2001 From: Thanat Wongsamut Date: Sat, 29 Jun 2024 13:11:27 +0700 Subject: [PATCH 03/10] [UPDATE] testcase --- tests/WebpackBuildStatsPlugin.spec.ts | 44 ++++++++++++++++++++++++++- tests/viteBuildStatsPlugin.spec.ts | 40 +++++++++++++++++++++++- 2 files changed, 82 insertions(+), 2 deletions(-) diff --git a/tests/WebpackBuildStatsPlugin.spec.ts b/tests/WebpackBuildStatsPlugin.spec.ts index 6e3b2a7..84a0ed1 100644 --- a/tests/WebpackBuildStatsPlugin.spec.ts +++ b/tests/WebpackBuildStatsPlugin.spec.ts @@ -15,6 +15,9 @@ const mockedSendBuildData = sendBuildData as jest.MockedFunction { compilationHash: 'blahblahblacksheep', nbrOfCachedModules: 1, nbrOfRebuiltModules: 1, - } as WebpackBuildData; + bundleFiles: { + 'file1.js': 1000, + 'file2.js': 2000, + }, + bundleSize: 3000, + } as unknown as WebpackBuildData; beforeEach(() => { jest.resetAllMocks(); @@ -52,9 +60,22 @@ describe('WebpackBuildStatsPlugin', () => { }), }; + // mock compilation + const mockedCompilation = { + assets: { + 'file1.js': { size: () => 1000 }, + 'file2.js': { size: () => 2000 }, + }, + }; + const plugin = new WebpackBuildStatsPlugin('my custom identifier'); plugin.apply(mockedCompiler as unknown as Compiler); + // simulate emit hook + const emitCallback = mockedCompiler.hooks.emit.tapAsync.mock.calls[0][1]; + await emitCallback(mockedCompilation, () => { }); + + // simulate done hook const callback = mockedCompiler.hooks.done.tap.mock.calls[0][1]; await callback(mockedStats as unknown as import('webpack').Stats); @@ -76,6 +97,14 @@ describe('WebpackBuildStatsPlugin', () => { }), }; + // mock compilation + const mockedCompilation = { + assets: { + 'file1.js': { size: () => 1000 }, + 'file2.js': { size: () => 2000 }, + }, + }; + // mock process object global.process = { env: { @@ -86,9 +115,22 @@ describe('WebpackBuildStatsPlugin', () => { const plugin = new WebpackBuildStatsPlugin(); plugin.apply(mockedCompiler as unknown as Compiler); + // simulate emit hook + const emitCallback = mockedCompiler.hooks.emit.tapAsync.mock.calls[0][1]; + await emitCallback(mockedCompilation, () => { }); + + // simulate done hook const callback = mockedCompiler.hooks.done.tap.mock.calls[0][1]; await callback(mockedStats as unknown as import('webpack').Stats); expect(mockedGetCommonMetadata).toBeCalledWith(123, 'default_value'); + expect(mockedSendBuildData).toBeCalledWith(expect.objectContaining({ + ...expected, + bundleFiles: { + 'file1.js': 1000, + 'file2.js': 2000, + }, + bundleSize: 3000, + })); }); }); diff --git a/tests/viteBuildStatsPlugin.spec.ts b/tests/viteBuildStatsPlugin.spec.ts index c7b1933..14c8f16 100644 --- a/tests/viteBuildStatsPlugin.spec.ts +++ b/tests/viteBuildStatsPlugin.spec.ts @@ -1,22 +1,36 @@ import type { CommonMetadata, ViteBuildData } from '../src/types'; import { viteBuildStatsPlugin } from '../src/viteBuildStatsPlugin'; import { getCommonMetadata, sendBuildData } from '../src/common'; +import { BigIntStats, PathLike, Stats, promises as fs } from 'fs'; +import path from 'path'; jest.mock('../src/common', () => ({ getCommonMetadata: jest.fn(), sendBuildData: jest.fn(), })); +jest.mock('fs', () => ({ + promises: { + stat: jest.fn(), + }, +})); + const mockedGetCommonMetadata = getCommonMetadata as jest.MockedFunction< typeof getCommonMetadata >; const mockedSendBuildData = sendBuildData as jest.MockedFunction; +const mockedFsStat = fs.stat as jest.MockedFunction; describe('viteBuildStatsPlugin', () => { const expected: ViteBuildData = { type: 'vite', viteVersion: '1.2.3', - } as ViteBuildData; + bundleFiles: { + 'file1.js': 1000, + 'file2.js': 2000, + }, + bundleSize: 3000, + } as unknown as ViteBuildData; beforeEach(() => { jest.resetAllMocks(); @@ -32,9 +46,21 @@ describe('viteBuildStatsPlugin', () => { mockedGetCommonMetadata.mockReturnValue({} as CommonMetadata); mockedSendBuildData.mockReturnValue(Promise.resolve()); + // mock fs.stat + mockedFsStat.mockImplementation((path: PathLike) => { + if (path.toString().endsWith('file1.js')) { + return Promise.resolve({ size: 1000 } as Stats); + } else if (path.toString().endsWith('file2.js')) { + return Promise.resolve({ size: 2000 } as Stats); + } else { + return Promise.reject(new Error('File not found')); + } + }); + const plugin = viteBuildStatsPlugin('my custom identifier'); (plugin.buildStart as () => void).bind({ meta: { rollupVersion: '1.2.3' } })(); (plugin.buildEnd as () => void)(); + await (plugin.writeBundle as any)({ dir: 'dist' }, { 'file1.js': {}, 'file2.js': {} }); await (plugin.closeBundle as () => Promise)(); expect(mockedGetCommonMetadata).toBeCalledWith(100, 'my custom identifier'); @@ -58,9 +84,21 @@ describe('viteBuildStatsPlugin', () => { }, } as unknown as typeof process; + // mock fs.stat + mockedFsStat.mockImplementation((path: PathLike) => { + if (path.toString().endsWith('file1.js')) { + return Promise.resolve({ size: 1000 } as Stats); + } else if (path.toString().endsWith('file2.js')) { + return Promise.resolve({ size: 2000 } as Stats); + } else { + return Promise.reject(new Error('File not found')); + } + }); + const plugin = viteBuildStatsPlugin(); (plugin.buildStart as () => void).bind({ meta: { rollupVersion: '1.2.3' } })(); (plugin.buildEnd as () => void)(); + await (plugin.writeBundle as any)({ dir: 'dist' }, { 'file1.js': {}, 'file2.js': {} }); await (plugin.closeBundle as () => Promise)(); expect(mockedGetCommonMetadata).toBeCalledWith(100, 'default_value'); From b8eb6b8493d551dd0cd758acbbe7c5305f3ce48e Mon Sep 17 00:00:00 2001 From: Thanat Wongsamut Date: Mon, 1 Jul 2024 17:05:28 +0700 Subject: [PATCH 04/10] [FIX] remove comment --- src/WebpackBuildStatsPlugin.ts | 2 -- src/viteBuildStatsPlugin.ts | 2 -- 2 files changed, 4 deletions(-) diff --git a/src/WebpackBuildStatsPlugin.ts b/src/WebpackBuildStatsPlugin.ts index 77bf9a4..2d88f59 100644 --- a/src/WebpackBuildStatsPlugin.ts +++ b/src/WebpackBuildStatsPlugin.ts @@ -41,8 +41,6 @@ export class WebpackBuildStatsPlugin { bundleSize: this.bundleSize ?? 0, }; - // console.log(buildStats); - sendBuildData(buildStats); }); } diff --git a/src/viteBuildStatsPlugin.ts b/src/viteBuildStatsPlugin.ts index dff1710..53f9558 100644 --- a/src/viteBuildStatsPlugin.ts +++ b/src/viteBuildStatsPlugin.ts @@ -43,8 +43,6 @@ export function viteBuildStatsPlugin( bundleSize, }; - // console.log(buildStats); - sendBuildData(buildStats); }, }; From 7e0ec0845c598913c4a79dfa8634ac61167a1c63 Mon Sep 17 00:00:00 2001 From: Thanat Wongsamut Date: Mon, 1 Jul 2024 17:31:12 +0700 Subject: [PATCH 05/10] [FIX] use reduce instead of loop --- src/WebpackBuildStatsPlugin.ts | 5 +---- src/viteBuildStatsPlugin.ts | 4 +--- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/WebpackBuildStatsPlugin.ts b/src/WebpackBuildStatsPlugin.ts index 2d88f59..7e848da 100644 --- a/src/WebpackBuildStatsPlugin.ts +++ b/src/WebpackBuildStatsPlugin.ts @@ -5,7 +5,6 @@ import type { Compiler, Stats, StatsCompilation } from 'webpack'; export class WebpackBuildStatsPlugin { private readonly customIdentifier: string | undefined; private bundleFiles: Record = {}; - private bundleSize: number = 0; constructor(customIdentifier: string | undefined = process.env.npm_lifecycle_event) { this.customIdentifier = customIdentifier; @@ -13,14 +12,12 @@ export class WebpackBuildStatsPlugin { apply(compiler: Compiler) { compiler.hooks.emit.tapAsync('AgodaBuildStatsPlugin', (compilation, callback) => { - this.bundleSize = 0; this.bundleFiles = {}; for (const assetName in compilation.assets) { if (compilation.assets.hasOwnProperty(assetName)) { const asset = compilation.assets[assetName]; this.bundleFiles[assetName] = asset.size(); - this.bundleSize += asset.size(); } } @@ -38,7 +35,7 @@ export class WebpackBuildStatsPlugin { nbrOfCachedModules: jsonStats.modules?.filter((m) => m.cached).length ?? 0, nbrOfRebuiltModules: jsonStats.modules?.filter((m) => m.built).length ?? 0, bundleFiles: this.bundleFiles ?? {}, - bundleSize: this.bundleSize ?? 0, + bundleSize: Object.values(this.bundleFiles).reduce((total, size) => total + size, 0) ?? 0, }; sendBuildData(buildStats); diff --git a/src/viteBuildStatsPlugin.ts b/src/viteBuildStatsPlugin.ts index 53f9558..98077a1 100644 --- a/src/viteBuildStatsPlugin.ts +++ b/src/viteBuildStatsPlugin.ts @@ -11,7 +11,6 @@ export function viteBuildStatsPlugin( let buildEnd: number; let rollupVersion: string | undefined = undefined; let bundleFiles: Record = {}; - let bundleSize: number = 0; return { name: 'vite-plugin-agoda-build-reporter', @@ -28,7 +27,6 @@ export function viteBuildStatsPlugin( try { const stats = await fs.stat(filePath); bundleFiles[fileName] = stats.size; - bundleSize += stats.size; } catch (err) { console.error(`Error reading file size for ${fileName}:`, err); } @@ -40,7 +38,7 @@ export function viteBuildStatsPlugin( type: 'vite', viteVersion: rollupVersion ?? null, bundleFiles, - bundleSize, + bundleSize: Object.values(bundleFiles).reduce((total, size) => total + size, 0), }; sendBuildData(buildStats); From 1c535b0f75032a80953872a6b1db892807ad0f73 Mon Sep 17 00:00:00 2001 From: Thanat Wongsamut Date: Wed, 3 Jul 2024 23:24:17 +0700 Subject: [PATCH 06/10] [ADD] fallback for getEndpointFromType --- src/common.ts | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/src/common.ts b/src/common.ts index 8b3ef26..2dd9c65 100644 --- a/src/common.ts +++ b/src/common.ts @@ -56,11 +56,23 @@ export const getCommonMetadata = ( }; }; -const getEndpointFromType = (type: string) => { - return { - webpack: process.env.WEBPACK_ENDPOINT, - vite: process.env.VITE_ENDPOINT, - }[type]; +const getEndpointFromType = (type: WebpackBuildData['type'] | ViteBuildData['type']): string => { + const endpointsFromEnv: Record = { + webpack: process.env.WEBPACK_ENDPOINT ?? '', + vite: process.env.VITE_ENDPOINT ?? '', + }; + + const defaultEndpoints: Record = { + webpack: "http://compilation-metrics/webpack", + vite: "http://compilation-metrics/vite", + } + + if (endpointsFromEnv[type] === '') { + console.warn(`No endpoint found for type "${type}" from environment variable, using default: ${defaultEndpoints[type]}`); + return defaultEndpoints[type]; + } + + return endpointsFromEnv[type]; }; const LOG_FILE = 'devfeedback.log'; @@ -77,11 +89,6 @@ const sendData = async (endpoint: string, data: CommonMetadata): Promise { const endpoint = getEndpointFromType(buildStats.type); - if (!endpoint) { - console.log(`No endpoint found for type ${buildStats.type}. Please set the environment variable.`); - return; - } - console.log(`Your build time was ${buildStats.timeTaken.toFixed(2)}ms.`); const sent = await sendData(endpoint, buildStats); From 12fdd93aefc9bda7f8c0fa0339b71b7d8c26a515 Mon Sep 17 00:00:00 2001 From: Thanat Wongsamut Date: Wed, 3 Jul 2024 23:34:47 +0700 Subject: [PATCH 07/10] [ADD] update readme about env in endpoint and Bundle Size feature --- README.md | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 65 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index bebdedf..700fef9 100644 --- a/README.md +++ b/README.md @@ -24,4 +24,68 @@ You might need to add this file to `.gitignore` to avoid committing it to the re ### Build Time (Compilation Time) This package supports collecting the build time (compilation time) of projects that are using Webpack (4.x or 5.x) or Vite (4.x). -Follow this [instruction](BUILD_TIME.md) to get started. + +### Bundle Size + +This package also supports collecting the bundle size of your project. This helps in understanding the size of the final output and optimizing it for better performance. + +## Usage + +### Configuration + +You can define an endpoint in the environment variable and the stats data will be sent there via HTTP POST Request + +| Environment Variable | Default Value | +| -------------------- | ------------------------------------ | +| WEBPACK_ENDPOINT | | +| VITE_ENDPOINT | | + +### Basic usage + +#### Webpack + +If you use **Webpack**, you can add the following to your `webpack.config.js` file: + +```javascript +const { WebpackBuildStatsPlugin } = require('agoda-devfeedback'); + +module.exports = { + // ... + plugins: [ + // ... + new WebpackBuildStatsPlugin(), + ], +}; +``` + +#### Vite + +If you use **Vite** you can add the following to your `vite.config.js` file: + +```javascript +import { viteBuildStatsPlugin } from 'agoda-devfeedback'; + +export default defineConfig({ + // ... + plugins: [ + // ... + viteBuildStatsPlugin(), + ], +}); +``` + +### Advanced usage + +Both Webpack and Vite plugins will not only send the build data but also send the command that you used to run the build like `yarn dev` or `yarn build` to be the build identifier which should work in most cases in order to help you distinguish between different build configurations. + +However, if you would like to define your own identifier, you can do so by passing it as a parameter to the plugin. + +```javascript +new WebpackBuildStatsPlugin('production'); +``` + +or + +```javascript +viteBuildStatsPlugin('production'); +``` From b7ea19ab0dae7948748cbae1b4c73d1bdd82c941 Mon Sep 17 00:00:00 2001 From: Thanat Wongsamut Date: Wed, 3 Jul 2024 23:36:46 +0700 Subject: [PATCH 08/10] [REMOVE] redundancy readme --- README.md | 91 ------------------------------------------------------- 1 file changed, 91 deletions(-) delete mode 100644 README.md diff --git a/README.md b/README.md deleted file mode 100644 index 700fef9..0000000 --- a/README.md +++ /dev/null @@ -1,91 +0,0 @@ -# agoda-devfeedback - -This is a JavaScript/TypeScript package to collect metrics that relate to developers' experience. - -## Installing - -Install the package: - -```bash -npm install --save-dev agoda-devfeedback -``` - -or - -```bash -yarn add --dev agoda-devfeedback -``` - -Please note that when an error happens, the package will put the error message to `devfeedback.log` file in the current working directory. -You might need to add this file to `.gitignore` to avoid committing it to the repository. - -## Supported Metrics - -### Build Time (Compilation Time) - -This package supports collecting the build time (compilation time) of projects that are using Webpack (4.x or 5.x) or Vite (4.x). - -### Bundle Size - -This package also supports collecting the bundle size of your project. This helps in understanding the size of the final output and optimizing it for better performance. - -## Usage - -### Configuration - -You can define an endpoint in the environment variable and the stats data will be sent there via HTTP POST Request - -| Environment Variable | Default Value | -| -------------------- | ------------------------------------ | -| WEBPACK_ENDPOINT | | -| VITE_ENDPOINT | | - -### Basic usage - -#### Webpack - -If you use **Webpack**, you can add the following to your `webpack.config.js` file: - -```javascript -const { WebpackBuildStatsPlugin } = require('agoda-devfeedback'); - -module.exports = { - // ... - plugins: [ - // ... - new WebpackBuildStatsPlugin(), - ], -}; -``` - -#### Vite - -If you use **Vite** you can add the following to your `vite.config.js` file: - -```javascript -import { viteBuildStatsPlugin } from 'agoda-devfeedback'; - -export default defineConfig({ - // ... - plugins: [ - // ... - viteBuildStatsPlugin(), - ], -}); -``` - -### Advanced usage - -Both Webpack and Vite plugins will not only send the build data but also send the command that you used to run the build like `yarn dev` or `yarn build` to be the build identifier which should work in most cases in order to help you distinguish between different build configurations. - -However, if you would like to define your own identifier, you can do so by passing it as a parameter to the plugin. - -```javascript -new WebpackBuildStatsPlugin('production'); -``` - -or - -```javascript -viteBuildStatsPlugin('production'); -``` From 872a6b8603f7d125a835ed406cb98a0d08c7a445 Mon Sep 17 00:00:00 2001 From: Thanat Wongsamut Date: Wed, 3 Jul 2024 23:37:53 +0700 Subject: [PATCH 09/10] [REMOVE] redundancy readme --- BUILD_TIME.md | 55 --------------------------------------------------- 1 file changed, 55 deletions(-) delete mode 100644 BUILD_TIME.md diff --git a/BUILD_TIME.md b/BUILD_TIME.md deleted file mode 100644 index 6094141..0000000 --- a/BUILD_TIME.md +++ /dev/null @@ -1,55 +0,0 @@ -# Build Time (Compilation Time) - -Requires `agoda-devfeedback` version 1.0.0 or later. - -## Usage - -### Basic usage - -#### Webpack - -If you use **Webpack**, you can add the following to your `webpack.config.js` file: - -```javascript -const { WebpackBuildStatsPlugin } = require('agoda-devfeedback'); - -module.exports = { - // ... - plugins: [ - // ... - new WebpackBuildStatsPlugin(), - ], -}; -``` - -#### Vite - -If you use **Vite** you can add the following to your `vite.config.js` file: - -```javascript -import { viteBuildStatsPlugin } from 'agoda-devfeedback'; - -export default defineConfig({ - // ... - plugins: [ - // ... - viteBuildStatsPlugin(), - ], -}); -``` - -### Advanced usage - -Both Webpack and Vite plugins will not only send the build data but also send the command that you used to run the build like `yarn dev` or `yarn build` to be the build identifier which should work in most cases in order to help you distinguish between different build configurations. - -However, if you would like to define your own identifier, you can do so by passing it as a parameter to the plugin. - -```javascript -new WebpackBuildStatsPlugin('production'); -``` - -or - -```javascript -viteBuildStatsPlugin('production'); -``` From fee6e10e7e75413b07ee54ce5311f6dc69ee6dd1 Mon Sep 17 00:00:00 2001 From: Thanat Wongsamut Date: Wed, 3 Jul 2024 23:38:53 +0700 Subject: [PATCH 10/10] [FIX] remove wrong file --- README.md | 91 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..700fef9 --- /dev/null +++ b/README.md @@ -0,0 +1,91 @@ +# agoda-devfeedback + +This is a JavaScript/TypeScript package to collect metrics that relate to developers' experience. + +## Installing + +Install the package: + +```bash +npm install --save-dev agoda-devfeedback +``` + +or + +```bash +yarn add --dev agoda-devfeedback +``` + +Please note that when an error happens, the package will put the error message to `devfeedback.log` file in the current working directory. +You might need to add this file to `.gitignore` to avoid committing it to the repository. + +## Supported Metrics + +### Build Time (Compilation Time) + +This package supports collecting the build time (compilation time) of projects that are using Webpack (4.x or 5.x) or Vite (4.x). + +### Bundle Size + +This package also supports collecting the bundle size of your project. This helps in understanding the size of the final output and optimizing it for better performance. + +## Usage + +### Configuration + +You can define an endpoint in the environment variable and the stats data will be sent there via HTTP POST Request + +| Environment Variable | Default Value | +| -------------------- | ------------------------------------ | +| WEBPACK_ENDPOINT | | +| VITE_ENDPOINT | | + +### Basic usage + +#### Webpack + +If you use **Webpack**, you can add the following to your `webpack.config.js` file: + +```javascript +const { WebpackBuildStatsPlugin } = require('agoda-devfeedback'); + +module.exports = { + // ... + plugins: [ + // ... + new WebpackBuildStatsPlugin(), + ], +}; +``` + +#### Vite + +If you use **Vite** you can add the following to your `vite.config.js` file: + +```javascript +import { viteBuildStatsPlugin } from 'agoda-devfeedback'; + +export default defineConfig({ + // ... + plugins: [ + // ... + viteBuildStatsPlugin(), + ], +}); +``` + +### Advanced usage + +Both Webpack and Vite plugins will not only send the build data but also send the command that you used to run the build like `yarn dev` or `yarn build` to be the build identifier which should work in most cases in order to help you distinguish between different build configurations. + +However, if you would like to define your own identifier, you can do so by passing it as a parameter to the plugin. + +```javascript +new WebpackBuildStatsPlugin('production'); +``` + +or + +```javascript +viteBuildStatsPlugin('production'); +```