Vite配置CDN引入第三方包报错及构建优化咨询

一、修复「Cannot use import statement outside a module」错误 #

你的配置问题出在错误使用optimizeDeps.entries配置CDN，且未正确在HTML中引入CDN资源并映射全局变量。以下是正确步骤：

1. 修正vite.config.js配置 #

移除optimizeDeps下的include和entries，保留external并添加全局变量映射：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      external: [
        '@fortawesome/fontawesome-svg-core',
        '@fortawesome/free-solid-svg-icons'
        // 其他需要CDN引入的第三方包
      ],
      output: {
        // 映射模块名到CDN提供的全局变量
        globals: {
          '@fortawesome/fontawesome-svg-core': 'FontAwesome',
          '@fortawesome/free-solid-svg-icons': 'FontAwesomeIcons'
        }
      }
    }
  }
})

2. 在index.html中引入CDN资源 #

直接在HTML的<head>中添加CDN脚本，优先使用UMD版本（避免模块语法报错）：

<!-- FontAwesome CDN 引入 -->
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-svg-core@6.4.0/dist/fontawesome.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/free-solid-svg-icons@6.4.0/dist/solid.min.js"></script>

若需使用ES模块版本，需给脚本标签添加type="module"属性：

<script type="module" src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-svg-core@6.4.0/index.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@fortawesome/free-solid-svg-icons@6.4.0/index.min.js"></script>

错误原因说明 #

• optimizeDeps.entries是用于指定Vite预构建的入口文件，并非配置CDN依赖的字段；
• 配置external后，Rollup会跳过这些依赖的打包，需要手动在HTML中引入对应CDN资源，同时通过globals告诉Rollup如何将模块名映射为浏览器全局变量。

二、站点部署与优化建议 #

构建体积优化 #

• 启用深度压缩：在build配置中设置minify: 'terser'（比默认esbuild压缩率更高），同时开启gzip/brotli压缩，Express可通过compression中间件实现；
• 代码分割：通过rollupOptions.output.manualChunks手动拆分大体积代码，比如将第三方依赖、不同路由的业务代码拆分为独立chunk；
• 图片资源优化：使用vite-plugin-imagemin插件压缩图片，对小图片启用base64内嵌；
• 按需引入：即使不用CDN，也可配置FontAwesome按需引入（如import { faUser } from '@fortawesome/free-solid-svg-icons'），减少无用代码。

部署优化 #

• 静态资源缓存：在Express中给dist目录的静态资源设置强缓存头（如Cache-Control: public, max-age=31536000, immutable），index.html设置协商缓存（Cache-Control: no-cache），利用Vite构建后的hash文件名实现缓存更新；
• 反向代理：用Nginx作为前端静态资源的反向代理，Nginx处理静态文件效率远高于Express，还可一键开启gzip、HTTP/2等优化；
• HTTPS配置：生产环境强制开启HTTPS，可使用免费证书提升安全性和加载速度；
• 环境变量隔离：通过.env.production配置生产环境的API地址等变量，避免硬编码；
• 错误监控：集成错误监控工具，实时捕获生产环境的代码错误，快速定位问题。

内容的提问来源于stack exchange，提问作者Akshat Tamrakar