webpack打包结果依赖分析
栏目: JavaScript · 发布时间: 6年前
内容简介:在传入环境变量
安装插件
https://www.npmjs.com/package/webpack-bundle-analyzer
npm install webpack-bundle-analyzer –save-dev
配置
在 package.json中
传入环境变量 ANALYZE
,最后 process.env.ANALYZE
来读取
"scripts": { "build": "node scripts/build.js", "analyze": "cross-env ANALYZE=1 npm run build" }
在 build/webpack.prod.config.js
的 plugin
后面加上判断
plugins.concat(process.env.ANALYZE?[ 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()方法的选项。 // 例如,您可以使用`source:false`选项排除统计文件中模块的来源。 // 在这里查看更多选项:https: //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21 statsOptions: null, logLevel: 'info' // 日志级别。可以是'信息','警告','错误'或'沉默'。 }) ]:[])
启动
npm run analyze
在对应地址后面添加端口 8888
,即可得到一个可视化模块大小界面
这个插件就是从 stats.json
中获取 chunks
然后最终使用 Canvas
画图。具体代码位于 analyzer.js
中的 getViewerData
方法
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Webpack介绍和使用(配置环境变量,打包依赖)
- 模块加载打包工具 Webpack 4.18.0 发布,更新依赖
- 【iOS 开发】利用 Carthage 将项目打包 Framework 并依赖 CocoaPods 第三方库的方法
- 浅析依赖倒转、控制反转、IoC 容器、依赖注入。
- Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象
- Gradle构建SpringBoot程序依赖管理之依赖版本自动控制
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Cyberwar
Kathleen Hall Jamieson / Oxford University Press / 2018-10-3 / USD 16.96
The question of how Donald Trump won the 2016 election looms over his presidency. In particular, were the 78,000 voters who gave him an Electoral College victory affected by the Russian trolls and hac......一起来看看 《Cyberwar》 这本书的介绍吧!