webpack-bundle-analyzer插件快速入门

栏目: 编程工具 · 发布时间: 5年前

内容简介:首先,这是一个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 ,按回车。

此时会打开浏览器,你将看到项目的分析图,大概长这样。

webpack-bundle-analyzer插件快速入门

**优点:**简单! **缺点:**每次运行打包命令时,都在本地起一个端口号为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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

这还是马云

这还是马云

陈伟 / 浙江人民出版社 / 2013-5 / 39.80元

“幽默马云”、“开心马云”、“顽皮马云”、“狂妄马云”……《这还是马云(全新升级版)》由陈伟所著,《这还是马云(全新升级版)》从各个角度揭开了实际生活中“千面马云”的真面目,告诉你一个与想象中大不一样的马云。这不只是一本书,更像一部喜剧电影,让你通过声音、色彩、表情等诸多要素走近马云,感受阿里巴巴。没有冗长的说教,只有让人忍俊不禁的细节;没有高深的理论,只有通俗、诚恳的陈述。作者借幽默平常的琐事,......一起来看看 《这还是马云》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换