使用webpack-bundle-analyzer查看vue项目打包依赖图

1，前言
2，安装
3，配置
4，运行

1，前言

项目写完了准备上线，发现打包后的包很大怎么办？，但是打包后的文件晦涩难懂，如何了解打包文件的细节，到底是哪里占了体积，了解某一个文件是由哪些内容打包而成，从而针对性的优化项目体积。下面给大家介绍一种工具。

2，安装

# NPM
npm install --save-dev webpack-bundle-analyzer

# Yarn
yarn add -D webpack-bundle-analyzer

3，配置

webpack-bundle-analyzer自定义属性（更详细配置戳这里）：

属性名	值	说明
analyzerMode	'server'，'static'， 'json'，'disabled'	Default: 'server'，分析报告的生成方式
analyzerHost	String	Default: 127.0.0.1，分享报告本地服务器地址
analyzerPort	Number	Default: 8888，分享报告本地端口地址
openAnalyzer	Boolean	Default: true，是否自动打开分析报告页面

在vue.config.js中

// 方式一
const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  configureWebpack: {
    plugins: [
      ew BundleAnalyzer({
        analyzerMode: process.env.VUE_APP_STAGE === 'LOCAL' ? 'disabled' : 'server', // 本地环境不启用
        openAnalyzer: false, // 是否自动打开报告页面
        analyzerPort: 9999 // 报告页面端口
      })
    ]
  }
}

// 方式二 该方式自定义配置方式暂时未知
module.exports = {
    chainWebpack: config => {
        config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
}