Webpack 插件分享: webpack-bundle-analyzer 打包文件分析工具

文章目录

Webpack 插件分享: webpack-bundle-analyzer 打包文件分析工具正文0. 为什么需要分析？1. 功能 & 范例2. 引入方式 其他资源参考连接完整代码示例

正文

0. 为什么需要分析？

前端工程化越来越庞大，对于三方库、源代码的编译、打包等能力要求越来越高，如果一不小心打了太大的东西进去会造成客户端渲染的时候严重延迟，影响用户体验

1. 功能 & 范例

webpack-bundle-analyzer 插件提供了一种对打包体积文件大小的可视化展示，并支持简单的搜索，是当我们需要对打包成果进行详细控制的时候非常好用的一个参考对象

下面两张图分别是利用@youxian/cli构建前端应用时，在开发环境和生产环境下分别利用 webpack-bundle-analyzer 分析时看到的分析结果

开发环境 生产环境

2. 引入方式

安装依赖

$ yarn add webpack-bundle-analyzer -D

配置文件引入插件：webpack.config.js

const {BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');module.exports = {// ...plugins: [// ...new BundleAnalyzerPlugin()]}

详细参数用法

自己去查！/webpack-contrib/webpack-bundle-analyzer

其他资源

参考连接

完整代码示例

/superfreeeee/Blog-code/tree/main/front_end/webpack/webpack_bundle_analyzer