【前端工程化】Webpack / Rollup 打包体积分析工具

前端工程化的第一步是模块打包，第二步就是针对不同打包工具的特点体积优化，这篇文章总结了常用的打包体积分析工具，提供优化方向的支持。

1. webpack-bundle-analyzer

webpack适用于规模相对大的项目，webapck-bundle-analyzer是webpack的一款插件，可以在打包时开启一个本地服务，可视化的展示各个包的体积（原始、gzip压缩后），了解项目的资源占比，做到有的放矢。

安装

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

# Yarn yarn add -D webpack-bundle-analyzer

使用

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

module.exports = {
    mode: "development",
    devtool: 'source-map',
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
    },
    plugins: [
        new BundleAnalyzerPlugin()
    ]
};

效果

其中stat，parsed，gzip含义如下

1. stat: 每个模块plugin处理前的原始体积
2. parsed: 每个模块打包处理之后的体积，比如Uglify等做了压缩，输出文件体积会缩小
3. gzip: 经 gzip 压缩后的体积，网络传输主要参考（gzip原理)

Options

应用以上的webpack配置，可以在每次npm run build时开启服务，如果不想每次都开启，或者需要静态的报告文件可以进一步配置插件options，其他详细配置参考文档

    plugins: [
        new BundleAnalyzerPlugin({
            analyzerMode: 'static', // static 生成html报告
            openAnalyzer: false, // 是否默认打开报告
            excludeAssets: 'bundle.js' // 分析时排除哪些资源
        })
    ]

2. rollup-plugin-visualizer

rollup一般用于npm包的构建，相比webpack更轻量。rollup-plugin-visualizer功能和前者类似，但ui设计上提供了更多的template可以调用。

安装

# NPM npm install --save-dev rollup-plugin-visualizer

# Yarn yarn add -D rollup-plugin-visualizer

使用

const { visualizer } = require("rollup-plugin-visualizer");

export default {
    input: './src/main.js',
    output: {
        file: 'bundle.js',
        format: 'es'
    },
    plugins: [
        // 放在所有插件最后
        visualizer({
            filename: 'report.html',
            open: true,
            gzipSize: true,
            brotliSize: true,
        })
    ]
};

效果