JavaScript Tree Shaking brotli 体积怎么查看-js教程-PHP中文网

要查看 javascript tree shaking 后的 brotli 体积，最直接的方法是使用 rollup-plugin-brotli 或 vite-plugin-compression 等构建插件在打包过程中生成 .br 文件，并通过终端命令 ls -lh 或 stat 查看文件大小。tree shaking 负责移除未使用的代码，而 brotli 压缩算法则进一步减小最终文件的体积，两者结合能显著降低网络传输开销。

JavaScript Tree Shaking brotli 体积怎么查看

使用 Rollup 插件生成并查看 Brotli 文件

在 Rollup 项目中集成 rollup-plugin-brotli 可以在构建完成后自动生成对应的 .br 文件。通过配置该插件，你可以指定输出目录和压缩级别，从而获得经过 Tree Shaking 优化后的最小化 JS 文件的 Brotli 压缩版本。查看这些文件的大小即可得知最终的传输体积。

JavaScript Tree Shaking brotli 体积怎么查看

import { brotli } from 'rollup-plugin-brotli';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es'
  },
  plugins: [
    brotli({
      include: ['**/*.js'],
      compressionLevel: 11
    })
  ]
};

运行 npx rollup -c 后，在 dist 目录下执行 ls -lh *.br 即可查看生成的 Brotli 文件及其大小。例如，如果原始文件为 10KB，压缩后可能仅为 3KB 左右，具体取决于代码内容和 Tree Shaking 的效果。

使用 Vite 插件进行本地预览与对比

Vite 默认使用 esbuild 进行快速构建，可以通过安装 vite-plugin-compression 来启用 Brotli 压缩。该插件会在构建时生成 .br 文件，方便开发者在本地直接比较压缩前后的体积差异。这种方法特别适合需要频繁迭代和验证压缩效果的开发场景。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

JavaScript Tree Shaking brotli 体积怎么查看

// vite.config.js
import { defineConfig } from 'vite';
import compression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    compression({
      algorithm: 'brotliCompress',
      ext: '.br',
      threshold: 1024 // 仅压缩大于 1KB 的文件
    })
  ]
});

执行 npx vite build 后，检查 dist 目录中的 .br 文件。通过对比原始 .js 文件和 .br 文件的大小，可以直观地看到 Brotli 压缩带来的体积缩减效果。确保 Tree Shaking 已正确配置（Vite 默认开启），以获取最准确的压缩结果。