Webpack Bundle Analyzer插件的使用

0

clipboard.png

一、原理

读取输出文件夹(通常是dist)中的stats.json文件,把该文件可视化展现的插件。便于直观地比较各个bundle文件的大小,以达到优化性能的目的。

二、安装

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

三、作为webpack插件使用

1、引入

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

2、使用

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

四、2种方式

1、每次构建时自动打开

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

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

配置参数记得补上,不然构建完不会自动打开~

2、运行特定命令才打开

(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,具体情况根据实际情况来定。

(3)命令行中键入命令
npm run bundle-report

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

你可能感兴趣的

载入中...