如何在Vite构建时保留script标签的初始顺序？

你的场景是：在index.html的head中按如下顺序放置脚本：

<script src="js/initMap.js" type="module"></script>
<script defer src="https://maps.googleapis.com/maps/api/"></script>

但构建后脚本顺序被反转，可能导致依赖逻辑出错。

Vite默认会对HTML中的脚本做优化排序，将外部资源与本地模块脚本调整顺序以提升加载性能。要保留初始顺序，可以试试以下两种方法：

方法一：使用data-vite-preserve属性 #

给需要保持顺序的脚本标签添加data-vite-preserve属性，告知Vite不调整该脚本的位置：

<script src="js/initMap.js" type="module" data-vite-preserve></script>
<script defer src="https://maps.googleapis.com/maps/api/" data-vite-preserve></script>

添加该属性后，Vite会保留这些脚本的原始顺序，不做优化调整。

方法二：通过Vite配置自定义HTML转换 #

在vite.config.js中使用transformIndexHtml钩子，手动控制脚本顺序：

export default {
  plugins: [
    {
      transformIndexHtml(html) {
        // 提取所有script标签
        const scriptTags = html.match(/<script[^>]*>[\s\S]*?<\/script>/g) || [];
        // 移除原有脚本，再按原始顺序重新插入到head末尾
        let processedHtml = html.replace(/<script[^>]*>[\s\S]*?<\/script>/g, '');
        scriptTags.forEach(tag => {
          processedHtml = processedHtml.replace('</head>', `${tag}</head>`);
        });
        return processedHtml;
      }
    }
  ]
};

这个钩子会在构建阶段修改HTML内容，确保脚本保持你设定的初始顺序。

额外注意事项 #

由于type="module"脚本默认延迟执行（和defer行为类似），即使标签顺序正确，也需要确保谷歌地图脚本加载完成后再执行initMap.js中的逻辑。可以在initMap.js中添加如下判断：

function initMap() {
  // 这里写你的地图初始化代码
}

// 检查谷歌地图是否已加载
if (window.google?.maps) {
  initMap();
} else {
  // 监听外部脚本加载完成事件
  const mapScript = document.querySelector('script[src="https://maps.googleapis.com/maps/api/"]');
  mapScript.addEventListener('load', initMap);
}

内容的提问来源于stack exchange，提问作者Flavien Laureau