Sonda 横空出世，JS 与 CSS 通用可视化和分析神器?

技术教程gslnedu2025-07-01 17:16:171A⁺A^-

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Sonda

Sonda 是一款通用的 JavaScript 和 CSS 打包可视化和分析工具，能够生成一份比其他同类工具更准确、更详细的交互式 HTML 报告。其准确性源于分析源码映射，并展示经过 tree-shaking 优化和压缩后每个模块的大小。

Sonda 可与以下工具配合使用：

打包工具：Vite、Rollup、Rolldown、esbuild、webpack、Rspack 等等
框架：Next.js、Nuxt、Astro、SvelteKit、Angular CLI 等等

Sonda 的典型特征可以概括为：

与所有打包工具兼容：无论使用哪种打包工具，都能提供一致的体验和功能
高度准确：提供最精确的可视化效果，反映 tree-shaking 和最小化的影响
深入洞察：显示压缩前后的大小、依赖关系图、下载时间等
格式灵活：提供 HTML（可视化的理想选择）和 JSON（自动化的理想选择）格式的报告
代码突出显示：识别并突出显示最终打包工具中包含的代码
问题检测：提醒开发者注意常见问题，例如：重复的依赖关系等等

目前 sonda 在 Github 上刚刚通过 MIT 协议开源，已经有超过 500 + 的 star，是一个值得关注的前端开源项目。

如何使用 Sonda

Sonda 与 Vite 集成

要分析和可视化 Vite 包，开发者需要安装 Sonda npm 包并将 Sonda 插件添加到 Vite 配置：

npm install sonda --save-dev

接下来，为 Vite 注册 Sonda 插件并在 vite.config.js 文件中启用源映射：

import {defineConfig} from 'vite';
import Sonda from 'sonda/vite';

export default defineConfig( {
  build: {
    sourcemap: true
  },
  plugins: [
    Sonda()
  ]
} );

此时，每次构建项目时，Sonda 都会生成一份包含软件包信息的报告。

Sonda 需要源映射才能正常运行，但某些其他插件可能不支持或默认生成源映射。如果 Sonda 无法正常工作，请检查正在使用的其他插件的文档，以确保源映射已启用。

Sonda 与 Webpack 集成

要分析和可视化 webpack 包，开发者需要安装 Sonda npm 包并将 Sonda 插件添加到 webpack 配置中：

npm install sonda --save-dev

接下来，在 webpack.config.js 文件中注册 Sonda 插件并启用源映射：

import Sonda from 'sonda/webpack';

export default {
  devtool: 'source-map',
  plugins: [
    new Sonda()
  ]
};

现在，每次构建项目时，Sonda 都会生成一份包含当前软件包信息的报告。和 Vite 一样，某些插件可能不支持或默认生成源映射，此时需要手动开启。

Sonda 与 Next.js 集成

与 Vite 和 Webpack 一样，安装了相应的依赖包后，开发者需要为 Next.js 注册 Sonda 插件并在 next.config.ts 文件中启用源映射：

import Sonda from 'sonda/next';
import type {NextConfig} from 'next';

const withSondaAnalyzer = Sonda();

const config: NextConfig = {
  productionBrowserSourceMaps: true
};
export default withSondaAnalyzer(config);

除了配置页面上列出的选项外，Next.js 集成还提供了一个名为 “server” 的附加选项。此选项使 Sonda 也能为服务器包生成报告，并且需要在 Next.js 配置中启用
experiment.serverSourceMaps 选项。

import Sonda from 'sonda/next';
import type {NextConfig} from 'next';

const withSondaAnalyzer = Sonda( {
  server: true
} );

const config: NextConfig = {
  productionBrowserSourceMaps: true,
  experimental: {
    serverSourceMaps: true
  }
};
export default withSondaAnalyzer(config);

与更多打包工具和框架的集成可以继续阅读文末资料，本文不再过多展开。