https://github.com/js-factory/perf-budget-webpack-plugin
Webpack plugin to set budget on individual file
https://github.com/js-factory/perf-budget-webpack-plugin
budgeting performance-budget plugin webpack
Last synced: about 1 month ago
JSON representation
Webpack plugin to set budget on individual file
- Host: GitHub
- URL: https://github.com/js-factory/perf-budget-webpack-plugin
- Owner: js-factory
- License: mit
- Created: 2019-03-08T11:09:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T20:21:45.000Z (over 2 years ago)
- Last Synced: 2024-11-17T10:45:54.062Z (7 months ago)
- Topics: budgeting, performance-budget, plugin, webpack
- Language: JavaScript
- Size: 474 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Performance Budget Webpack Plugin
Webpack plugin to set budget on individual bundle file.
## Installation
Install the plugin with npm:
```shell
$ npm install --save-dev @js-factory/perf-budget-webpack-plugin
```
## Basic Usage
```javascript
const PerfBudgetWebpackPlugin = require("@js-factory/perf-budget-webpack-plugin");
const webpackConfig = {
entry: "index.js",
output: {
path: "dist",
filename: "bundle.js"
},
plugins: [
new PerfBudgetWebpackPlugin({
main: { // Chunk Name
js: 20000,
css: 1000 // CSS Extracted using extract plugin for each chunk
},
dynamicImportChunkName1: {
js: 10000 // Size in bytes
},
dynamicImportChunkName2: {
js: 10000 // Size in bytes
}
})
]
};
```
## Example
[Performance Budget Example](https://github.com/js-factory/examples/tree/master/perf-budget-webpack-plugin)
## Need
Performance budget requires to set the budget on important files separately.
Here, we can set that individually based on js as well as css.
## Author
[js-factory](https://github.com/js-factory)
## License
[MIT](LICENSE)