首屏加载太多请求，怎么合并减少？

直接说，能合，而且必须合。你现在这种情况就是典型的"请求数爆炸"，浏览器加载七八个文件，光TCP握手就要来回折腾好几次。

解决方案：用构建工具自动合并

最靠谱的做法是上构建工具，webpack或者vite都行。我推荐vite，因为配置简单很多，新人上手快。

为什么构建工具好？
它不仅能合并文件，还能帮你处理依赖顺序、压缩代码、加上缓存hash避免改一点代码整个缓存失效。

具体操作步骤

第一步：安装vite

npm create vite@latest my-project -- --template vanilla

cd my-project

npm install

第二步：把CSS文件合并到一个main.css

新建一个入口CSS文件，用@import把其他几个引进去：

/* src/styles/main.css */



/* 加载顺序很重要，先基础后业务 */

@import './reset.css';

@import './header.css';

@import './banner.css';



/* 业务样式写下面 */

.banner {

  /* ... */

}

第三步：同样处理JS，合并到一个main.js

// src/main.js



/* 依赖顺序要注意，谁依赖谁就放前面 */

import '../css/main.css';



/* 工具类先加载 */

import './utils.js';



/* 业务逻辑后加载 */

import './home.js';



/* 你的业务代码... */

console.log('首页初始化');

第四步：配置vite生成单一文件

// vite.config.js

import { defineConfig } from 'vite';

import { resolve } from 'path';



export default defineConfig({

  build: {

    // 强制合并成一个JS文件

    rollupOptions: {

      output: {

        // 手动指定输出文件名，加hash避免缓存问题

        entryFileNames: 'assets/js/[name].[hash].js',

        chunkFileNames: 'assets/js/[name].[hash].js',

        // 合并成一个CSS文件

        assetFileNames: (assetInfo) => {

          if (assetInfo.name.endsWith('.css')) {

            return 'assets/css/[name].[hash].css';

          }

          return 'assets/[name].[hash].[extname]';

        },

        // 手动控制chunks，不让它自动拆分

        manualChunks: undefined

      }

    },

    // 压缩代码

    minify: 'terser',

    // 关闭sourcemap减小体积

    sourcemap: false

  }

});

第五步：在HTML里只引用生成后的文件

第六步：运行构建

npm run build

然后你dist目录里就两个文件，一个JS一个CSS，完事。

你担心的两个问题

1. 样式冲突怎么办？

这里需要注意，合并文件本身不会导致冲突，冲突是因为你们CSS命名没做好。建议：

用BEM命名规范，比如 .header__logo--active，或者直接上CSS Modules让构建工具帮你生成唯一的类名。如果你们项目已经写乱了，那合并前先重构一下CSS。

2. 加载顺序怎么办？

构建工具会根据import顺序自动处理JS执行顺序。你需要做的就是在main.js里按正确顺序import。比如utils.js被home.js引用，那就必须先import utils。

CSS的@import顺序就是加载顺序，这个也要注意。

缓存问题

构建工具会在文件名里加hash，比如 main.a1b2c3.js，这样你改代码重新构建后hash变了，浏览器就会重新请求，不用担心用户缓存旧文件。



如果你们项目比较老，不想搭构建工具，也可以用在线工具比如 Online CSS Minifier 或者 jscompress 手动合并，但每次改代码都要手动合并一遍，麻烦且容易出错。

长远来看，还是建议上构建工具，一步到位。