webpack-bundle-analyzer

  webpack-bundle-analyzer 是一个打包文件分析工具,主要作用是可以直观分析打包出的文件包含哪些,大小占比如何,压缩后的大小等等。

一、安装插件
  npm install webpack-bundle-analyzer --D
二、配置 vue.config.js 文件
  const { resolve } = require('path');

  module.exports = {
    ....其它的配置
    chainWebpack: (config) => {
      if (process.env.NODE_ENV === 'production') {
        config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
      }
    },
  }
  • 如果想在运行项目时就出现,则可以把 环境变量 的判断注释掉
  • 打开的默认端口号是:8888
效果
  • webpack-bundle-analyzer
上一篇:java非递归检索文件夹下所有文件的代码


下一篇:webpack-bundle-analyzer 可视化分析包插件