webpack-bundle-analyzer

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！