[Webpack] Analyze a Production JavaScript Bundle with webpack-bundle-analyzer
JavaScriptwebpack with Bundle Analyzer production
2023-09-14 09:00:49 时间
Bundle size has a huge impact on JavaScript performance. It's not just about download speed, but all the JavaScript we ship to the browser needs to be parsed and compiled before it can be executed. Keeping our bundle in check can be difficult, but it's much easier when we can see where the bloat is coming from. In this lesson
Install:
npm i -D webpack-bundle-analyzer
We want to do anaylyzer only for production:
// webpack.config.prod.js const merge = require('webpack-merge') const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer') const baseConfig = require('./webpack.config.base') module.exports = merge(baseConfig, { mode: 'production', plugins: [new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false, reportFilename: 'bundle_sizes.html' })]
it generate a 'bundle_szies.html' file in dist folder.
相关文章
- 44 道 JavaScript 难题
- JavaScript正则表达式
- 第一百三十九节,JavaScript,封装库--CSS选择器
- [Javascript] Create 2d array by using Array.from
- [Javascript] Check both prop exists and value is valid
- [Cypress] install, configure, and script Cypress for JavaScript web applications -- part2
- [Javascript] Understanding the .constructor property on JavaScript Objects
- 用纯Javascript打造类似NodeJS的模块载入系统
- JavaScript 单线程 Event Loop [MD]
- [Javascript] event.target.closest(selector)
- [Javascript] Classify JSON text data with machine learning in Natural
- [AngularJS + Webpack] Uglifying your JavaScript
- [Javascript] IIFE
- Javascript异步编程的4种方法
- Javascript中的内置对象—数组
- rxjs里subscribeToArray的一个JavaScript模拟实现
- ZoomCharts JavaScript 1.20.2 Crack
- javascript的8中数据类型