单页面添加什么代码 可以让这个单页只调用当前引入的CSS跟JS

要在单页面应用（SPA）中让页面仅加载当前需要的CSS和JS文件，通常会使用模块化、懒加载（Lazy Loading）技术和动态导入（Dynamic Import）。以下是实现这种效果的一些关键代码片段：

1. **模块化**（如ES6的`import`和`export`）：

   // 使用CommonJS或ES6 import导出按需使用的模块
   // 例如，假设你有一个`styles.js`和`scripts.js`文件：
   export const styles = './styles.css';
   export const scripts = './scripts.js';

   // 在需要的地方导入它们：
   import('./styles.js');
   import('./scripts.js', { lazy: true }); // 如果你想延迟加载scripts.js

2. **懒加载**（例如使用Webpack的`import()`函数）：

   function loadScript(src) {
     return new Promise((resolve, reject) => {
       const script = document.createElement('script');
       script.src = src;
       script.onload = resolve;
       script.onerror = reject;
       document.head.appendChild(script);
     });
   }

   async function loadResources() {
     await loadScript('styles.css');
     await loadScript('scripts.js');
   }

   if (document.readyState !== 'loading') {
     loadResources();
   } else {
     document.addEventListener('DOMContentLoaded', loadResources);
   }

3. **HTML5 `async` 和 `defer` 属性**：

   <link rel="stylesheet" href="styles.css" async />
   <script src="scripts.js" defer></script>

`async`属性告诉浏览器可以异步加载脚本，而不会阻塞DOM解析；`defer`属性则保证脚本会在文档解析完成后（DOMContentLoaded事件触发之前）执行。