把 CSS 與 JS 合併成一個檔案，減少 HTTP 請求
在現今的網頁開發中，HTTP 請求的數量直接影響使用者看到內容前的等待時間。將多個 CSS 與 JS 檔案合併成單一檔，可減少請求次數，從而提升整體載入速度。
以下以實際範例說明如何完成這一步驟，並提供常見工具的使用方法。
合併檔案帶來的好處
- 減少網路往返：每一次 HTTP 請求都需要 DNS 查詢、TCP 三次握手及可能的 TLS 握手，合併後可以省去這些額外開銷。
- 降低瀏覽器限制：大多數瀏覽器對同一來源單一連線有請求上限，合併可避免因超過限制而造成的阻塞。
- 簡化部署與維護：只需管理一個檔案，即可一次性更新所有樣式與行為。
步驟說明
-
收集原始檔：先確定網站目前使用的 CSS 與 JS 檔案路徑與順序，尤其注意依賴關係（如 jQuery 必須在其他插件前載入）。
-
建立合併檔：將所有 CSS 放進一個
.css檔、所有 JS 放進一個.js檔。若兩者必須同時使用，可考慮合併為單一.js檔，並在其中嵌入<style>標籤載入 CSS。 -
更新 HTML：將原先多個
<link>與<script>改寫成對應的單一引用。例如
<link rel="stylesheet" href="assets/combined.css">
<script src="assets/combined.js"></script>
-
測試功能：確認所有互動與樣式均正常。若有遲延執行的腳本，可能需要使用
defer或async屬性。 -
監控載入效能：可利用瀏覽器開發者工具或第三方服務（如 Lighthouse）驗證實際減少的請求數量與提升時間。
範例：合併 CSS 與 JS 為單一檔案
以下示範如何將兩個簡易樣式表及兩段腳本合併為 combined.js，並在其中插入 <style> 標籤載入 CSS。
// combined.js
/* ====================== CSS 部分 ===================== */
const style = document.createElement('style');
style.textContent = `
body { font-family: Arial, sans-serif; background:#f9f9f9; }
.btn { padding:10px 20px; background:#007bff; color:white; border:none; cursor:pointer; }
`;
document.head.appendChild(style);
/* ====================== JS 部分 ===================== */
function greet() {
alert('歡迎來到合併後的頁面！');
}
document.addEventListener('DOMContentLoaded', () => {
const btn = document.createElement('button');
btn.className = 'btn';
btn.textContent = '點我打招呼';
btn.onclick = greet;
document.body.appendChild(btn);
});
提示：若樣式與腳本量很大，可考慮先合併 CSS，再使用壓縮工具（如 UglifyJS）對 JS 做 minify，最後再執行上述步驟。
常用自動化工具範例
Gulp
const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');
// 合併並壓縮 CSS
function styles() {
return gulp.src(['src/css/*.css'])
.pipe(concat('combined.css'))
.pipe(cleanCSS())
.pipe(gulp.dest('dist'));
}
// 合併並壓縮 JS
function scripts() {
return gulp.src(['src/js/*.js'])
.pipe(concat('combined.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
}
exports.default = gulp.series(styles, scripts);
Webpack
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: ['./src/css/style1.css', './src/css/style2.css', './src/js/script1.js', './src/js/script2.js']
},
output: {
filename: 'combined.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.css$/i, use: ['style-loader', 'css-loader'] }
]
}
};
小提醒：Webpack 的
mode: 'production'已自動啟用 CSS 與 JS 的壓縮，無需額外設定。