webpack-bundle分析

webpack-bundle-analyzer

webpack-bundle-analyzer 使用交互式可缩放树状图可视化 webpack 输出文件的大小的插件，帮助使用者更加方便的分析打包结果，便于使用者优化项目构建。

安装

npm i -D webpack-bundle-analyzer

使用

const HtmlWebpackPlugin = require("html-webpack-plugin")
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    mode: "production",
    entry: { index: "./src/index" },
    output: {
        filename: "[name].[contenthash:5].js",
        clean: true,
    },
    plugins: [
        new HtmlWebpackPlugin({ 
            title: "webpack-treeShaking", 
            template: "./index.html" 
        }),
        new BundleAnalyzerPlugin()
    ]
}

更多 webpack-bundle-analyzer 配置信息请查看文档。