webpack打包性能图形化分析 webpack打包性能图形化分析

webpack打包性能图形化分析

安装webpack-bundle-analyzer

Webpack.config.js引入

let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

配置plugin:

plugins: [new BundleAnalyzerPlugin({

        //  可以是`server``static``disabled`

        //  `server`模式下,分析器将启动HTTP服务器来显示软件包报告。

        //  静态模式下,会生成带有报告的单个HTML文件。

        //  `disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。

        analyzerMode: 'server',

        //  将在服务器模式下使用的主机启动HTTP服务器。

        analyzerHost: '127.0.0.1',

        //  将在服务器模式下使用的端口启动HTTP服务器。

        analyzerPort: 8888,

        //  路径捆绑,将在`static`模式下生成的报告文件。

        //  相对于捆绑输出目录。

        reportFilename: 'report.html',

        //  模块大小默认显示在报告中。

        //  应该是`stat``parsed`或者`gzip`中的一个。

        //  有关更多信息,请参见定义一节。

        defaultSizes: 'parsed',

        //  在默认浏览器中自动打开报告

        openAnalyzer: true,

        //  如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成

        generateStatsFile: false,

        //  如果`generateStatsFile``true`,将会生成Webpack Stats JSON文件的名字。

        //  相对于捆绑输出目录。

        statsFilename: 'stats.json',

        //  stats.toJson()方法的选项。

        //  例如,您可以使用`sourcefalse`选项排除统计文件中模块的来源。

        //  在这里查看更多选项:https  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21

        statsOptions: null,

        logLevel: 'info' /*日志级别。可以是'信息''警告''错误''沉默'*/

      })]


运行webpack -p –progress查看打包分析

分享本文至:

评论 0

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论