Webpack Bundle Analyzer插件的运用

2019年8月20日 178次阅读 来源: 可欣

《Webpack Bundle Analyzer插件的运用》

一、道理

读取输出文件夹（通常是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

    原文作者：可欣
    原文地址: https://segmentfault.com/a/1190000017716736
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞