webpack 可视化打包文件大小插件

title: webpack 可视化打包文件大小插件 id: 42d4e10fa886f26cc34d6fbc5e020fed tags: [] date: 2000/01/01 00:00:00 updated: 2022/12/09 13:40:03 isPublic: true --#|[分隔]|#--

webpack 可视化打包文件大小插件

插件名称：webpack-bundle-analyzer

github文档：https://github.com/webpack-contrib/webpack-bundle-analyzer

demo 页面截图展示见最下面。

使用 webpack 打包的项目，经常遇到生成的单个 js 文件过大的问题，但又不太知道这些 js 中分别存放的是什么哪里的数据、分别有多大。

这个插件就是生效于打包期间，会全程监控打包过程，在打包完成后，它会启动一个本地服务，通过访问本地端口，能够打开一个页面，展示刚刚打包、生成的 js 们时收集的内部信息。

使用方法

需要在打包的 webpack 配置中，添加这个插件，再使用打包指令即可使用，会先打包完成

react 中的使用方法举例

如果是使用 create-react-app 脚手架生成的项目，则需要使用 react-app-rewired 插件，才能使用 webpack 配置文件，详情搜索 react-app-rewired 了解。

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

// 使用 react-app-rewired 指令时才执行的文件

module.exports = function override(config, env) {
  // 关于webpack的相关配置
  // 展示文件体积和内部依赖信息的功能插件
  config.plugins.push(new BundleAnalyzerPlugin({
    analyzerPort: 8889, // 端口号，默认8888
  }))
  return config;
};

vue 中的使用方法举例

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

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin({
        analyzerPort: 8889, // 端口号，默认8888
      })
    ],
  },
}

截图展示：

图中右侧展示的，就是左侧下面那几个勾选了的文件，图中每个文件内部所包含的，是每个文件内部代码的来源和所占体积。