使用webpack-bundle-analyzer查看webpack打包分析

说在前面

webpack作为一个知名的前端工程打包工具，为我们提供了很大的便利，打包后的文件晦涩难懂，但是当我们尝试打包调优时，又不得不去了解下打包的细节，了解某一个文件是由哪些内容打包而成，下面给大家介绍一种工具。

开门见山

webpack-bundle-analyzer文件可以很形象的展示打包的细节。

安装：

# NPM
npm install --save-dev webpack-bundle-analyzer // 
# Yarn
yarn add -D webpack-bundle-analyzer

小贴士： 为什么要通过 --save-dev的方式安装，因为这个工具只是开发时需要，发布后系统运行并不依赖此工具。

使用：

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

如果使用的是vue-cli创建的项目：

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

更多内容参见：vue cli修改默认webpack配置
如此一来，便可以通过运行命令来进行打包，顺便查看打包详情。

npm run build

最后

是的，你没猜错，页面时打包完成时自动打开的。