Webpack Bundle Analyzer插件的使用

时间 2019-12-13

标签 webpack bundle analyzer 插件使用繁體版

原文原文链接

1、原理

读取输出文件夹（一般是dist）中的stats.json文件，把该文件可视化展示的插件。便于直观地比较各个bundle文件的大小，以达到优化性能的目的。webpack

2、安装

> npm install webpack-bundle-analyzer --save-devweb

3、做为webpack插件使用

一、引入

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginnpm

二、使用

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
...
}))

4、2种方式

一、每次构建时自动打开

构建完成以后，浏览器会自动打开localhost:8888,不用改动package.jsonjson

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
    analyzerMode: 'server',
    generateStatsFile: true,
    statsOptions: { source: false }
}))

配置参数记得补上，否则构建完不会自动打开～浏览器

二、运行特定命令才打开

（1）把analyzerMode设置为disabled性能

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
    analyzerMode: 'disabled',
    generateStatsFile: true,
    statsOptions: { source: false }
}))

（2）在package.json的scripts字段中加入优化

"bundle-report": "webpack-bundle-analyzer --port 8123 dist/stats.json"

其中stat.json文件的位置在打包后的文件夹中，一般是dist，具体状况根据实际状况来定。ui

（3）命令行中键入命令
npm run bundle-reportspa

浏览器自动打开分析页面:localhost:8123插件