内容简介:首先,这是一个webpack的插件,需要配合webpack和webpack-cli一起使用。这个插件的功能是生成代码分析报告,帮助提升代码质量和网站性能。1、配置webpack.config.js文件:2、配置package.json 文件
首先,这是一个webpack的插件,需要配合webpack和webpack-cli一起使用。这个插件的功能是生成代码分析报告,帮助提升代码质量和网站性能。
安装
# NPM npm install --save-dev webpack-bundle-analyzer # Yarn yarn add -D webpack-bundle-analyzer 复制代码
使用方法一
1、配置webpack.config.js文件:
// webpack.config.js 文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
plugins: [
new BundleAnalyzerPlugin() // 使用默认配置
// 默认配置的具体配置项
// new BundleAnalyzerPlugin({
// analyzerMode: 'server',
// analyzerHost: '127.0.0.1',
// analyzerPort: '8888',
// reportFilename: 'report.html',
// defaultSizes: 'parsed',
// openAnalyzer: true,
// generateStatsFile: false,
// statsFilename: 'stats.json',
// statsOptions: null,
// excludeAssets: null,
// logLevel: info
// })
]
}
复制代码
2、配置package.json 文件
{
"scripts": {
"dev": "webpack --config webpack.dev.js --progress"
}
}
复制代码
3、在命令行 工具 中输入 npm run dev ,按回车。
此时会打开浏览器,你将看到项目的分析图,大概长这样。
**优点:**简单! **缺点:**每次运行打包命令时,都在本地起一个端口号为8888的本地服务器,并自动在浏览器中展示项目的分析结果。不够灵活,并不是每次构建都想看代码分析!
使用方法二
1、配置webpack.config.js文件:
// webpack.config.js 文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'disabled', // 不启动展示打包报告的http服务器
generateStatsFile: true, // 是否生成stats.json文件
}),
]
}
复制代码
2、配置package.json 文件
{
"scripts": {
"generateAnalyzFile": "webpack --profile --json > stats.json", // 生成分析文件
"analyz": "webpack-bundle-analyzer --port 8888 ./dist/stats.json" // 启动展示打包报告的http服务器
}
}
复制代码
3、在命令行工具中,运行先 npm run generateAnalyzFile 命令,然后运行 npm run analyz 命令。 此时就可以看到分析结果了。
**优点:**稍微复杂,但是灵活啊! **缺点:**每次运行命令时,都会在 dist 目录下生成一个 stats.json 文件。这个问题,可以将 generateStatsFile 属性设置为 false ,但是这样就无法生成 stats.json 文件了。解决办法:需要查看分析报告的时候设置为 true ,其余时候设置为 false 。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Bootstrap入门之JavaScript插件
- piwik 插件开发入门教程
- IDEA 插件开发入门教程
- Gradle插件从入门到进阶
- Gradle 插件与ASM入门
- CoreDNS 系列:插件开发入门篇
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
互联网创业核心技术:构建可伸缩的web应用
【美】Artur Ejsmont / 李智慧、何坤 / 电子工业出版社 / 2016-12 / 89
可伸缩架构技术是所有互联网技术中最重要,也是最引人入胜的技术。《互联网创业核心技术:构建可伸缩的web应用》针对互联网创业需求快速迭代,业务快速发展,短时间内用户、数据、访问量激增的特点,提纲挈领地描述了伸缩性架构的基本原理与设计原则,详细阐述了Web应用前端层、服务层、数据层的可伸缩架构,并花大量篇幅讲述了缓存技术和异步处理技术的可伸缩设计及其在Web系统中的具体应用。 《互联网创业核心技......一起来看看 《互联网创业核心技术:构建可伸缩的web应用》 这本书的介绍吧!
RGB转16进制工具
RGB HEX 互转工具
Markdown 在线编辑器
Markdown 在线编辑器