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的體積。