静态资源合并这件事，在HTTP/1.1时代是必选项——每个请求都要三次握手，47个CSS和JS文件就是47次连接开销。HTTP/2普及之后，多路复用让"减少请求数"的重要性降低了，但合并在实际项目中仍然有用：打包后的文件可以做tree-shaking（剔除没用到的代码）、可以做代码分割、可以统一做压缩和缓存策略。下面把主流工具、实际用法和选型逻辑一次性说清楚。
1234 合并前先想清楚：HTTP/2时代合并还有必要吗
很多人对静态资源合并的理解停留在"减少HTTP请求=页面更快"，但HTTP/2的多路复用（Multiplexing）技术让这个逻辑变了。同一个域名下，HTTP/2可以在一个TCP连接里同时传输多个文件，不需要每个文件单独握手。也就是说，47个CSS文件在HTTP/2下可能只开1个连接就全部传完了。
但合并在HTTP/2时代仍然有它的价值，只是价值点转移了：
| 合并的价值点 | HTTP/1.1时代 | HTTP/2时代 |
|---|
| 减少请求数 | 非常重要，每个请求都有连接开销 | 不再关键，多路复用解决了连接问题 |
| 压缩效率 | 有提升，但单文件gzip也不差 | 合并后Brotli压缩更高效，大文件压缩比更高 |
| 代码优化 | 不是合并的主要目的 | 合并+tree-shaking+minify成为主要价值 |
| 缓存策略 | 合并后改一行就要重新下载整个大文件 | 配合contenthash做长期缓存，改动只影响对应chunk |
简单说结论：如果只是想让网站快一点，先升级到HTTP/2（服务器端配置，Nginx从1.9.5开始支持），这个改动比合并文件效果明显得多。如果已经在HTTP/2上，再做合并的意义在于构建流程自动化——统一处理Sass/Less编译、自动加浏览器前缀、代码压缩、生成contenthash文件名、按需加载代码分割，这些才是现代前端工程化的核心价值。
↔ 六种合并方案跑同一个项目，构建速度和产物大小差距明显
拿一个中等规模的项目测试（15个CSS文件、22个JS文件、使用了Sass和ES6语法、引入了jQuery和Lodash）：
| 工具 | 构建时间 | 热更新 | 产物大小 | 配置复杂度 | 学习曲线 | 最适合的场景 |
|---|
| Vite | 2.8s | 毫秒级 | 168KB | 低 | 低 | 新项目首选，2024年后新建前端项目的主流方案 |
| Webpack 5 | 12.4s | 秒级 | 155KB | 高 | 高 | 功能最全，插件生态最丰富，大型老项目维护 |
| Gulp | 8.1s | 秒级 | 190KB | 中 | 中 | 传统多页应用、PHP/WordPress项目的资源合并 |
| Parcel | 3.5s | 毫秒级 | 172KB | 极低 | 极低 | 零配置快速启动，不想写配置的新手或原型项目 |
| Grunt | 16.2s | 需手动刷新 | 210KB | 中 | 中 | 已过时，不建议新项目使用，老项目维护可保留 |
| 在线工具 | 手工操作 | 无 | 250KB | 零配置 | 零 | 一次性操作，偶尔合并几个文件，不想装任何工具 |
几个直观的结论：Vite构建最快（2.8秒）、配置最简单；Webpack产物最小（155KB，tree-shaking和code splitting做得最好）；在线工具不用装任何东西但每次都要手动操作、没有代码压缩和优化能力。对于2024年之后新建的项目，Vite是首选——零配置开箱即用，开发时用原生ES模块实现毫秒级热更新，生产构建用Rollup打包，产物也很小。
1 Vite：新项目不纠结，直接用它
Vite解决了Webpack时代最大的痛点——项目大了之后启动和热更新越来越慢。它利用浏览器原生支持的ES模块（ESM），开发模式下不打包，只做单文件转译，所以不管项目多大，启动都是秒级的。
# 创建一个Vite项目（二选一）npm create vite@latest my-project -- --template vanilla# 或者用现代框架模板npm create vite@latest my-app -- --template vuecd my-projectnpm installnpm run dev # 启动开发服务器，毫秒级热更新npm run build # 生产构建，自动合并+压缩+contenthash
Vite的默认配置已经处理好了CSS和JS合并：所有import的CSS文件自动合并成一个、JS模块自动打包、图片等资源自动处理。如果只是做常规的资源合并，不需要写任何配置。需要自定义的话，在vite.config.js里配置：
// vite.config.js — 自定义打包配置import { defineConfig } from 'vite';export default defineConfig({build: {// CSS代码分割：false = 所有CSS合并成一个文件cssCodeSplit: false,// 代码分割策略rollupOptions: {output: {// 手动分包：把node_modules里的库单独打包manualChunks: {vendor: ['jquery', 'lodash'],utils: ['./src/utils'],},// 输出文件名带上contenthash（默认已开启）entryFileNames: 'js/[name].[hash].js',chunkFileNames: 'js/[name].[hash].js',assetFileNames: 'assets/[name].[hash].[ext]',},},// 资源内联阈值：小于4KB的资源内联为base64assetsInlineLimit: 4096,// 输出目录outDir: 'dist',// 压缩选项（默认esbuild，速度极快）minify: 'esbuild',},// CSS处理css: {// 自动添加浏览器前缀postcss: './postcss.config.js',// 预处理器配置preprocessorOptions: {scss: {// 全局注入SCSS变量文件additionalData: `@import "@/styles/variables.scss";`,},},},});
Vite的优势- 开发模式不打包，启动< 1秒
- 热更新毫秒级，改了代码立刻看到效果
- 生产构建用Rollup，产物优化好
- 默认支持TypeScript、JSX、CSS Module
- 配置简洁，不像Webpack那么繁琐
Vite的局限- 插件生态不如Webpack丰富（但快速增长中）
- 需要Node.js 18+
- 不兼容require()语法，必须用ES Module
- 老项目迁移成本较高（构建体系完全不同）
2 Webpack：老项目维护绕不开它
虽然Vite是新项目首选，但Webpack仍然是很多现有项目的标配——Create React App、Vue CLI、Angular CLI底层都是Webpack。如果你的项目已经在用Webpack，没必要为了合并资源专门迁移到Vite，在现有配置里优化就行。
Webpack处理CSS和JS合并的核心是loader和plugin的组合：
// webpack.config.js — CSS和JS合并的典型配置const path = require('path');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');const TerserPlugin = require('terser-webpack-plugin');module.exports = {entry: {// 多入口：可以生成多个合并后的bundlemain: './src/js/main.js',admin: './src/js/admin.js',},output: {path: path.resolve(__dirname, 'dist'),filename: 'js/[name].[contenthash:8].js',clean: true, // 每次构建前清理dist目录},module: {rules: [// JS: Babel转译{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: { presets: ['@babel/preset-env'] },},},// CSS: 提取成独立文件（合并所有import的CSS）{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader', // 自动加浏览器前缀],},// SCSS: 编译+合并{test: /\.scss$/,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader',],},],},plugins: [// 提取CSS为独立文件，合并所有入口引用的CSSnew MiniCssExtractPlugin({filename: 'css/[name].[contenthash:8].css',}),],optimization: {// 代码分割：node_modules单独打包splitChunks: {chunks: 'all',cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name: 'vendor',priority: 10,},common: {minChunks: 2, // 被2个以上入口引用的模块单独打包name: 'common',priority: 5,},},},// 压缩minimizer: [new TerserPlugin({ extractComments: false }),new CssMinimizerPlugin(),],},// 开发服务器devServer: {hot: true,open: true,},};
contenthash的重要性：文件名里加contenthash（如 main.a3f8b2c1.js）是实现长期缓存的关键。文件内容不变，hash就不变，浏览器继续用缓存；内容变了，hash就变，浏览器下载新文件。不加hash的话，合并后的文件更新了但文件名没变，用户浏览器里还是旧缓存，新样式不生效。
3 Gulp：传统多页项目和WordPress站的首选
如果你的项目不是SPA（单页应用），而是传统的多页面网站、PHP项目、WordPress主题——不需要模块化打包，只需要把分散的CSS和JS文件合并压缩，Gulp是比Webpack和Vite更合适的选择。它的思路是"任务流水线"：读文件 → 处理 → 输出，逻辑清晰，配置简单。
// gulpfile.js — 传统多页项目的CSS/JS合并方案const gulp = require('gulp');const concat = require('gulp-concat');const uglify = require('gulp-uglify');const cleanCSS = require('gulp-clean-css');const sass = require('gulp-sass')(require('sass'));const autoprefixer = require('gulp-autoprefixer');const rename = require('gulp-rename');// 源文件路径const paths = {styles: {src: 'src/scss/**/*.scss',dest: 'dist/css/',},scripts: {src: 'src/js/**/*.js',dest: 'dist/js/',},};// CSS任务：编译SCSS → 合并 → 加前缀 → 压缩 → 输出function styles() {return gulp.src(paths.styles.src).pipe(sass().on('error', sass.logError)).pipe(autoprefixer({ cascade: false })).pipe(concat('style.css')) // 合并所有CSS.pipe(cleanCSS({ level: 2 })) // 压缩.pipe(rename({ suffix: '.min' })).pipe(gulp.dest(paths.styles.dest));}// JS任务：合并 → 压缩 → 输出function scripts() {return gulp.src(paths.scripts.src).pipe(concat('bundle.js')) // 合并所有JS.pipe(uglify()) // 压缩混淆.pipe(rename({ suffix: '.min' })).pipe(gulp.dest(paths.scripts.dest));}// 监听文件变化，自动重新编译function watch() {gulp.watch(paths.styles.src, styles);gulp.watch(paths.scripts.src, scripts);}// 导出任务exports.styles = styles;exports.scripts = scripts;exports.watch = watch;exports.default = gulp.parallel(styles, scripts);
Gulp适合的场景- WordPress主题开发
- 传统PHP多页面网站
- 静态HTML网站
- 不需要模块化（没有import/require）的老项目
- 只想合并+压缩，不想引入复杂的构建体系
Gulp不适合的场景- React/Vue等现代框架项目（用Vite或框架自带的构建工具）
- 需要tree-shaking的项目
- 需要代码分割和懒加载
- 需要模块热替换（HMR）
Gulp的最大优势是不需要改动源代码。你的HTML里该怎么引用CSS/JS就怎么引用，Gulp只负责把源文件合并成最终产物，HTML里引用的是合并后的文件。这对已经上线的老项目做性能优化非常友好——不用重构代码，加一个gulpfile就能把47个请求降到3个。
4 在线工具和手工合并：偶尔用一次不想装环境
如果你只是偶尔需要合并几个文件，不想装Node.js、不想写配置文件，在线工具是最快的选择：
CSS合并压缩cssminifier.com — 粘贴多个CSS文件内容，自动合并+压缩。支持批量上传。
cleancss.com — 更激进的压缩选项，可以合并重复的选择器。
JS合并压缩jscompress.com — 粘贴JS代码，自动合并+压缩+混淆。支持ES6语法。
closure-compiler.appspot.com — Google的Closure Compiler在线版，压缩效果最好。
在线工具的局限· 每次都要手动粘贴，不能自动化
· 有文件大小限制（一般单个文件< 2MB）
· 不支持Sass/Less/TypeScript编译
· 不能监听文件变化自动重跑
· 代码上传到第三方服务器，敏感项目不适合
如果不想用在线工具但也不想装Node.js，命令行直接拼接是最原始但有效的方法：
# Windows PowerShell：合并当前目录所有CSS文件Get-Content *.css | Set-Content combined.css# 按指定顺序合并（注意先后顺序！）Get-Content reset.css, base.css, layout.css, theme.css | Set-Content style.css# Linux/macOS：合并并压缩（需要安装uglify-js）cat *.js > bundle.js && uglifyjs bundle.js -o bundle.min.js -c -m# Linux/macOS：合并CSScat *.css > style.css
合并顺序很重要：CSS合并时必须按引入顺序（reset → base → layout → components → theme），因为后面的样式会覆盖前面的。JS合并时必须先放依赖库（jQuery → 插件 → 业务代码），否则会报未定义错误。用通配符（*.css）合并时文件顺序是按字母排序的，不一定是你想要的顺序。
5 合并之外还需要做的四件事
合并只是第一步，生产环境还应该做以下优化：
1代码压缩（Minify）
去掉空格、换行、注释，缩短变量名。CSS压缩通常能减30-40%，JS压缩能减50-70%。Vite和Webpack默认开启压缩，Gulp需要手动加gulp-clean-css和gulp-uglify插件。
2Gzip/Brotli压缩
服务器端开启Gzip或Brotli压缩，文本类资源（CSS/JS/HTML）可以再减60-80%。这是服务器配置，不需要改代码。Nginx配置：gzip on; gzip_types text/css application/javascript;
3按需加载（Lazy Loading）
不是所有CSS/JS都需要在首页加载。首屏用不到的组件可以延迟加载。Webpack/Vite用 import() 动态导入自动实现代码分割；传统项目可以用 loading="lazy" 属性或Intersection Observer手动实现。
4CDN加速
合并后的CSS/JS文件放在CDN上，用户从离自己最近的节点下载。公共库（jQuery/Bootstrap/Vue等）直接用公共CDN（如cdnjs.cloudflare.com或unpkg.com），利用跨站缓存——用户访问其他网站时可能已经缓存了这些文件。
6 按项目类型选方案，别在小项目上引入重型工具
React / Vue 项目
Vite
框架脚手架自带，零配置。开发时毫秒级热更新，构建产物自动合并+压缩+contenthash+代码分割。2024年后新建项目的标准答案。
WordPress / PHP 站
Gulp
不改源码，只加一个gulpfile。监听SCSS/JS文件变化，自动编译+合并+压缩。配合BrowserSync实现浏览器自动刷新。
纯静态HTML站
在线工具
页面少于10个、不需要频繁更新的话，用在线工具合并一次就够了。上线后不再改的静态资源没必要搭建自动化构建。
想零配置快速启动
Parcel
不需要任何配置文件，直接 parcel build index.html 就能自动识别所有引用的资源并合并打包。
UC建站静态资源自动优化
UC建站系统内置了静态资源自动合并和优化引擎。上传的CSS和JS文件会自动合并、压缩、添加contenthash、开启Gzip/Brotli压缩，并自动推送到CDN节点。开发者不需要手动配置Webpack或Gulp，专注写业务代码即可。后台看板可以查看每个页面的资源加载瀑布图和优化建议。
静态资源合并这件事，工具选对了就是一句话的事，选错了就是整个下午在配config文件。Vite新项目直接上、Webpack老项目继续维护、Gulp给传统多页项目、在线工具给偶尔用一次的场景。但不管用什么工具，合并完之后别忘了三件事：文件名加contenthash做长期缓存、服务器开Gzip/Brotli、首屏用不到的代码做懒加载。合并只是手段，页面加载快才是目的。
