目录
一、webpack-bundle-analyzer是什么?
webpack-bundle-analyzer是webpack的插件,需要配合webpack和webpack-cli一起使用。这个插件可以读取输出文件夹(通常是dist)中的stats.json文件,把该文件可视化展现,生成代码分析报告,可以直观地分析打包出的文件有哪些,及它们的大小、占比情况、各文件Gzipped
后的大小、模块包含关系、依赖项等,对应做出优化,从而帮助提升代码质量和网站性能。
二、安装
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
三、使用方法
1. 作为插件使用
1. 配置webpack.config.js文件:
// webpack.config.js 文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
plugins: [
new BundleAnalyzerPlugin() // 使用默认配置
// 默认配置的具体配置