隨著前端網頁的日益復雜，使用的樣式表和腳本也愈發龐大。為了優化頁面加載速度，減少HTTP請求，我們可以考慮將多個樣式表文件和腳本文件合并為一個。

首先來看CSS合并。我們可以在頭部中使用link標簽引用多個CSS文件，比如：

<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">

這樣會生成多個HTTP請求，影響頁面加載速度。我們可以使用工具將這些CSS文件合并為一個。比如使用Grunt或Gulp，在配置文件中加入合并CSS的任務：

module.exports = function(grunt) {
grunt.initConfig({
cssmin: {
combine: {
files: {
'all.css': ['style1.css', 'style2.css', 'style3.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin']);
};

這里使用了grunt-contrib-cssmin插件，將style1.css、style2.css和style3.css合并為all.css，可以統一引用all.css來代替之前的多個CSS文件。

再來看JS合并。同樣可以在頭部中使用script標簽引用多個JS文件，比如：

<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>

如果這些JS文件有依賴關系，我們需要按照順序引用它們，否則會出現JS報錯。而且這樣也會生成多個HTTP請求。我們可以使用工具將這些JS文件合并為一個。比如使用Grunt或Gulp，在配置文件中加入合并JS的任務：

module.exports = function(grunt) {
grunt.initConfig({
uglify: {
combine: {
files: {
'all.js': ['script1.js', 'script2.js', 'script3.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};

這里使用了grunt-contrib-uglify插件，將script1.js、script2.js和script3.js合并為all.js，可以統一引用all.js來代替之前的多個JS文件。

總體來說，CSS和JS的合并可以提高頁面加載速度，減少HTTP請求，但也需要注意生成的合并文件大小，過大的文件會適得其反。需要經過測試和優化，才能達到最佳效果。