webpack-bundle-analyzer打包文件分析工具
- 功能
意識(shí)到你的文件打包壓縮后中真正的內(nèi)容
找出哪些模塊組成最大的大小
找到錯(cuò)誤的模塊
優(yōu)化它！
最好的事情是它支持縮小捆綁沉颂！它解析它們以獲得實(shí)際大小的捆綁模塊则果。它也顯示他們的gzipped大忻逶恪盛龄！
- 安裝 cnpm install webpack-bundle-analyzer --save-dev
- 在webpack的配置文件中添加以下代碼：
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
- 開啟項(xiàng)目(npm run dev(serve))后航缀，打開網(wǎng)址 localhost:8888 進(jìn)行查看分析
- 配置項(xiàng)說明
new BundleAnalyzerPlugin({
// 可以是`server`夜牡，`static`或`disabled`与纽。
// 在`server`模式下，分析器將啟動(dòng)HTTP服務(wù)器來顯示軟件包報(bào)告塘装。
// 在“靜態(tài)”模式下渣锦，會(huì)生成帶有報(bào)告的單個(gè)HTML文件。
// 在`disabled`模式下氢哮，你可以使用這個(gè)插件來將`generateStatsFile`設(shè)置為`true`來生成Webpack Stats JSON文件袋毙。
analyzerMode: 'server',
// 將在“服務(wù)器”模式下使用的主機(jī)啟動(dòng)HTTP服務(wù)器。
analyzerHost: '127.0.0.1',
// 將在“服務(wù)器”模式下使用的端口啟動(dòng)HTTP服務(wù)器冗尤。
analyzerPort: 8888,
// 路徑捆綁听盖，將在`static`模式下生成的報(bào)告文件。
// 相對(duì)于捆綁輸出目錄裂七。
reportFilename: 'report.html',
// 模塊大小默認(rèn)顯示在報(bào)告中皆看。
// 應(yīng)該是`stat`，`parsed`或者`gzip`中的一個(gè)背零。
// 有關(guān)更多信息腰吟，請(qǐng)參見“定義”一節(jié)。
defaultSizes: 'parsed',
// 在默認(rèn)瀏覽器中自動(dòng)打開報(bào)告
openAnalyzer: true,
// 如果為true徙瓶，則Webpack Stats JSON文件將在bundle輸出目錄中生成
generateStatsFile: false,
// 如果`generateStatsFile`為`true`毛雇，將會(huì)生成Webpack Stats JSON文件的名字。
// 相對(duì)于捆綁輸出目錄侦镇。
statsFilename: 'stats.json',
// stats.toJson（）方法的選項(xiàng)灵疮。
// 例如，您可以使用`source：false`選項(xiàng)排除統(tǒng)計(jì)文件中模塊的來源壳繁。
// 在這里查看更多選項(xiàng)：https： //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
logLevel: 'info' // 日志級(jí)別震捣。可以是'信息'闹炉，'警告'蒿赢，'錯(cuò)誤'或'沉默'。
})
