第五十六章-Vite插件-rollup-plugin-visualizer

1.说明

• rollup-plugin-visualizer的npm首页：依赖分析插件。

• cross-env的npm首页：命令行配置环境变量

2.安装visualizer

yarn add rollup-plugin-visualizer @types/rollup-plugin-visualizer --dev

3.配置插件

build\vite\plugin\visualizer.ts：

/**
 * Package file volume analysis
 */
import visualizer from 'rollup-plugin-visualizer';
import { isReportMode } from '../../utils';
import type { Plugin } from 'vite';

export function configVisualizerConfig() {
  if (isReportMode()) {
    return visualizer({
      filename: './node_modules/.cache/visualizer/stats.html',
      open: true,
      // @ts-ignore
      gzipSize: true,
      // @ts-ignore
      brotliSize: true,
    }) as Plugin;
  }
  return [];
}

4.配置Vite

build\vite\plugin\index.ts：

// ...
import { configVisualizerConfig } from './visualizer';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  // rollup-plugin-visualizer
  vitePlugins.push(configVisualizerConfig());

  return vitePlugins;
}

5.安装cross-env

yarn add cross-env --dev

6.编辑脚本

package.json：

{
  // ...
  "scripts": {
    // ...
    "report": "cross-env REPORT=true npm run build"
    // ...
  }
  // ...
}

看不懂这个报告。。。

上一章

第五十五章-Vite插件-vite-plugin-style-import

下一章

第五十七章-Vite插件-vite-plugin-theme