vue-cli3 添加webpack-bundle-analyzer

一、webpack-bundle-analyzer作用

使用webpack-bundle-analyzer可以分析打包后你所打包内容的占比，从而找到最大的模块，然后让我们更加有目的，从容的去优化项目。

二、安装和配置插件

本次安装的前提是使用vue-cli3，在项目文件中创建vue.config.js(ps:vue cli3 配置文件)

使用npm或cnpm安装webpack-bundle-analyzer如下：

npm install --save-dev webpack-bundle-analyzer
cnpm install --save-dev webpack-bundle-analyzer

配置vue.config.js如下：

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

module.exports = {
   	...
    configureWebpack: {
        plugins: [
            new BundleAnalyzerPlugin({ analyzerPort: 8920 })
        ]
    },
    
}

然后运行打包命令如下：

npm run build

然后会自动打开浏览器并显示类似于下图：
通过分析文件分布图可以得出，最大的是element-ui.common.js.在当前项目中我并没有采用按需加载的方式导入element-ui框架导致打包的单文件过大。后期可以使用按需加载的方式，从而减少element-ui.common.js的体积。