小唠叨——别把 Vite 当成黑盒子

说实话，刚接触 Vite 那会儿，我还真把它当成了魔法棒。

一键 dev，页面飞速刷出来感觉自己像是站在风口上。

可是一到生产环境，bundle 大得吓人——那叫一个 “JavaScript heap out of memory”。

我跟同事敲黑板：别光靠 Vite 自带的压缩，要动点手脚。

于是我们聊起了 external，这玩意儿Neng帮我们把一些大库扔到 CDN 去，从而让产物瘦身。

先说external 就是告诉 Rollup，“这几个依赖我不想打进 bundle”。

比如说 Vue、Lodash、Moment…这些库本身Yi经hen大，Ru果每个页面dou自带一份，那浪费真的是巨大的。

外部化后打包产物里只剩下 import 语句，运行时再去 CDN 拉取对应的全局变量。

哈哈，这么一说是不是听起来像给项目装了个“外挂”一样？对，就是这么爽！

// vite.config.ts

import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    rollupOptions: {
      external: 
    }
  }
})

上面这段代码里我们直接把 'vue' 和 'lodash' 标记为外部依赖。

不过光标记还不够，你得让浏览器知道对应的全局变量是谁。

import externalGlobals from 'rollup-plugin-external-globals'
export default defineConfig({
  plugins: ,
  build: {
    rollupOptions: {
      external: 
    }
  }
})

这样一来代码里写 import { ref } from 'vue' 时Zui终产物会变成 { ref } from "Vue"，浏览器就会去全局找 Vue.ref。

$ pnpm run build
# ... 打包日志省略
dist/assets/index-xxxx.js   42KB   │ gzip: 12KB
dist/assets/index.css       5KB    │ gzip: 1.8KB

哎呀妈呀，这和之前的几百 KB 比起来是不是立马感受到轻盈的快感？哈哈。

#1 开发环境要记得关闭 external，否则 IDE 会报错找不到模块。

#2 CDN 链接一定要是生产版，否则调试时可Neng会kan到奇怪的警告。

#3 Ru果你用了 TypeScript，需要在 tsconfig.json 加入 "types": 。

#4 别忘了给全局变量加上注释，让后来的同事知道它们来源于 CDN，而不是本地包。

#5 有时候你会发现控制台提示 “Failed to resolve module specifier 'vue'”。不对不对，这其实是因为外部化后没有对应的 global 名字导致的。检查一下 plugin 的映射表吧！

Aha，你们可Neng好奇，一个技术博客Ru果被百度抓不到，那流量怎么来呀？其实原因大多有三点：

#1 页面渲染太快，爬虫没等到 JS 执行完就走了。解决办法：在关键内容处加上 SSR 或者预渲染。

#2 没有合理的 meta 信息，搜索引擎不知道这页讲什么。

#3 robots.txt 把 /dist/ 给屏蔽了。打开它，让爬虫Neng访问你的产物目录。

*说实话，我第一次遇到这个问题，还以为是自己的博客被黑客攻击了呢，哈哈哈……后来才发现是上述小疏忽导致的。咱就是说把这些细节补齐后百度基本就会乖乖收录啦！*

AFAIK，只要是Ke以通过 CDN 提供全局变量的库，douKe以走 external 路线。

Lodash 用 '_', Dayjs 用 'dayjs', ECharts 用 'echarts'.

*不过注意*：Ru果你的项目里用了 tree‑shaking，外部化后就失去了只挑选需要部分代码的优势，因为整个库dou会被拉下来。不过Ru果你本来就用了完整库，那外部化绝对划算！*

Coding 本身就是一种艺术，尤其是前端这种“既要好kan又要快”的活儿，geng像是在调配酱料。

Eslint、Prettier、Vite、Rollup，每个工具dou有自己的调味点儿；而 external 就是那瓶“低卡酱油”，适量撒一点，就Neng让你的 bundle 味道geng清淡、geng易入口。

当然啦，这招并不是万Neng钥匙：

#1 对于纯前端 SPA 项目，它帮你省下几百 KB Yi经够爽；但Ru果还有 SSR 或者微前端架构，那还得考虑服务端渲染时如何获取同样的 CDN 包。

#2 有些内部业务库根本没有公开 CDN，只Neng自行托管或使用私有 npm 包，这种情况只Neng靠代码分割 来削减体积。

#3 别忘了监控实际用户加载时间，有时候压缩后的文件虽小，但网络抖动导致首屏卡顿，那才是真正的问题所在。