# webpack-bundle-analyzer

houdunren.com @ 向军大叔

xj-small

webpack-bundle-analyzer 可以在执行编译时清楚的看到每个包压缩后大小。

# 安装配置

使用npm 或 cnpm 等进行安装

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

在项目的 webpack.mix.js 中进行配置

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;

mix.webpackConfig({
    plugins: [new BundleAnalyzerPlugin()]
})
    .js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .extract(["vue", "axios", "jquery", "lodash", "bootstrap"])
    .version();

# 运行

在命令行执行 npm run production 生产编译,将自动打开网页显示如下界面

image-20200628211429694