rollup-plugin-visualizer - 依赖包分析

• rollup-plugin-visualizer ：依赖分析插件。
• cross-env ：命令行配置环境变量

安装 visualizer

yarn add rollup-plugin-visualizer --dev

配置插件

build\plugin\visualizer.ts：

/**
 * 配置依赖包分析插件
 */
import visualizer from 'rollup-plugin-visualizer'
export default function configVisualizerConfig() {
  if (isReportMode()) {
    return visualizer({
      filename: './node_modules/.cache/visualizer/stats.html',
      open: true,
      gzipSize: true,
      brotliSize: true
    })
  }
  return []
}
function isReportMode(): boolean {
  return process.env.REPORT === 'true'
}

配置 Vite

build\plugin\index.ts：

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

安装 cross-env

yarn add cross-env --dev

https://www.npmjs.com/package/cross-env
官网解释：
当您使用这样设置环境变量时，大多数 Windows 命令提示符都会阻塞 NODE_ENV=production。（例外是Bash on Windows，它使用本机 Bash。）同样，windows 和 POSIX 命令使用环境变量的方式也有所不同。在 POSIX 中，您使用：$ENV_VAR ，在 Windows 上，您使用%ENV_VAR%

简单讲就是，windows不支持NODE_ENV=development的设置方式，需要这个库来解决

cross-env能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。

编辑脚本

package.json：

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

生成报告

yarn report