需要使用到的插件为 webpack-bundle-analyzer

    配置文件为

    1. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
    2. const WebpackBundleAnalyzer = require("webpack-bundle-analyzer")
    3.   .BundleAnalyzerPlugin;
    6. const path = require("path")
    8. module.exports = {
    9.     mode: "production",
    10.     output: {
    11.         path: path.resolve(__dirname, 'dist'),
    12.     },
    13.     optimization: {
    14.         splitChunks: {
    15.             // 分包策略
    16.             chunks: "all",
    17.         }
    18.     },
    19.     devServer: {
    20.         open: true,
    21.         port: 9000
    22.     },
    23.     plugins: [
    24.         new CleanWebpackPlugin(),
    25.         new WebpackBundleAnalyzer()
    26.     ],
    27. };

    index.js 的代码

    2. const $ = require('jquery')
    3. // 懒加载
    4. const { compact } = await import(/* webpackChunkName:"lodash" */"lodash-es"); // lodash-es是使用es6导出的方式导出的，lodash是commonJs的方式导出的
    5. let box = document.getElementsByClassName('box')[0];
    6. box.onclick = async function(){
    7.     console.log("box的单击事件触发")
    8.     let a = compact([0,"",1,2,false,50])
    9.     console.log(a)
    10. }

    打包好后插件会自动运行
    运行结果
    image.png
    可以看到整个bundle的大小信息 stat是打包前的大下 parsed 是打包后的大小 gzipped 是经过gzip压缩后的大小
    当我取消懒加载后的效果图如下，你会发现包的体积变大啦
    image.png