webpack 优化体积可视化分析webpack-boundle-analyzer插件

秒速五厘米 2021-07-24 12:27 453阅读 0赞

1、下载
    	cnpm install -D webpack-boundle-analyzer
    
    2、配置
    	const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    	
    	plugins:[
    		new BundleAnalyzerPlugin()
    	]
    
    	其他参数:
    		analyzerMode:'server'，可以是server，static，json，disabled。在server模式下，分析器将启动HTTP服务器来显示软件包报告。在“静态”模式下，会生成带有报告的单个HTML文件。在disabled模式下，你可以使用这个插件来将generateStatsFile设置为true来生成Webpack Stats JSON文件。
    	    analyzerHost: '127.0.0.1', 将在“服务器”模式下使用的端口启动HTTP服务器。
    	    analyzerPort: 8888, 端口号。
    	    reportFilename: 'report.html', 路径捆绑，将在static模式下生成的报告文件。相对于捆绑输出目录。
    	    defaultSizes: 'parsed'，默认显示在报告中的模块大小匹配方式。应该是stat，parsed或者gzip中的一个。
    	    openAnalyzer: true：在默认浏览器中自动打开报告。
    	    generateStatsFile:false: 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成。
    	    statsFilename: 'stats.json', 相对于捆绑输出目录。
    	    statsOptions: null，stats.toJson()方法的选项。例如，您可以使用source：false选项排除统计文件中模块的来源。在这里查看更多选项：https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
    	    logLevel: 'info'，日志级别，可以是info, warn, error, silent。
    	    excludeAssets:null，用于排除分析一些文件
    
    3、通过命令来启动
    	只生成配置文件
    	 执行:webpack --profile --json > stats.json
     
    	执行命令才打开服务器
    		new BundleAnalyzerPlugin({
    			analyzerMode:'disabled',
    			generateStatsFile:true,	生成stats.json文件
    		})
    		webpack-boundle-analyzer --port 8080 ./dist/stats.json的路径

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/1059011bda984f1baec1649c5d579158.png