如何在Google Apps Script谷歌文档扩展中高效引入大型外部样式表与脚本

Great question—optimizing load speed and offline support for Google Docs add-ons while using Material Design is totally achievable, and there are several practical tweaks you can make beyond just copying the full library into your templates. Let’s break down the most effective approaches:

1. Trim Material Design to Only What You Need #

The official Material Design libraries (like Material Components Web) come packed with every component and style imaginable, but you’re probably only using a tiny subset. By cherry-picking just the components your add-on needs, you can slash the file size from 490KB to just a few dozen KB:

• If you’re using Material Components Web, install it via npm and import only the components you use (e.g., buttons, text fields, cards) instead of the full library:

  // Import only required components
  import '@material/web/button/filled-button.js';
  import '@material/web/textfield/outlined-text-field.js';
  

• Use a build tool like Webpack or Rollup with tree-shaking enabled to automatically strip unused code. Replace your stylesheet.html and javascript.html with these trimmed-down bundles.

2. Cache Static Resources with Google Apps Script’s Cache Service #

Since your resources are already stored in template files, leverage Apps Script’s built-in CacheService to avoid reloading and parsing them on every add-on launch:

• Create a server-side function to fetch cached styles/JS, falling back to the template file if the cache is empty:

  function getCachedMaterialStyles() {
    const cache = CacheService.getScriptCache();
    let styles = cache.get('material_core_styles');
    
    if (!styles) {
      styles = HtmlService.createHtmlOutputFromFile('stylesheet.html').getContent();
      cache.put('material_core_styles', styles, 604800); // Cache for 7 days
    }
    
    return styles;
  }
  

• In your main add-on HTML template, insert the cached content directly:

  <head>
    <?!= getCachedMaterialStyles() ?>
  </head>
  

Repeat this pattern for your JavaScript resources. This cuts down on repeated template parsing and bandwidth usage, and speeds up subsequent add-on loads.

3. Inline Critical Resources & Lazy-Load Non-Core Components #

Prioritize the resources your add-on needs to render its initial state by inlining them directly into your main HTML. Delay loading non-essential components until they’re actually needed:

• Inline core Material Design styles (like base themes, button/input styles) in your <head> to avoid extra network requests on launch:

  <head>
    <style>
      /* Only include the minimal styles needed for your add-on's initial UI */
      .mdc-button {
        border-radius: 4px;
        padding: 8px 16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      /* Add other core styles here */
    </style>
  </head>
  

• Lazy-load non-critical components (e.g., modals, dropdowns) when the user interacts with a feature that requires them:

  function loadModalComponent() {
    if (!document.getElementById('modal-styles')) {
      const styleLink = document.createElement('link');
      styleLink.id = 'modal-styles';
      styleLink.rel = 'stylesheet';
      // Use base64-encoded trimmed styles to avoid external requests
      styleLink.href = 'data:text/css;base64,[YOUR_TRIMMED_MODAL_STYLES_BASE64]';
      document.head.appendChild(styleLink);
      
      // Load corresponding JS similarly
      const script = document.createElement('script');
      script.src = 'data:text/javascript;base64,[YOUR_TRIMMED_MODAL_JS_BASE64]';
      document.body.appendChild(script);
    }
  }
  

This keeps initial load times blazingly fast, and ensures core functionality works offline since critical resources are already embedded.

4. Use a Lightweight Material Design Alternative #

If you don’t need all the interactive bells and whistles of the official library, opt for a lightweight, CSS-only Material Design implementation, or roll your own core styles:

• Stick to Material Design’s core visual rules (shadows, rounded corners, theme colors, typography) and write only the styles your add-on uses. This can reduce your CSS footprint to just a few KB, making it perfect for offline use and fast loads.

5. Version Your Resources for Browser Caching #

Add version identifiers to your resource files to ensure browsers cache updated content correctly, without forcing unnecessary re-downloads:

• Append a version parameter when linking to your template files:

  <link rel="stylesheet" href="stylesheet.html?v=1.1">
  <script src="javascript.html?v=1.1"></script>
  

When you update your Material Design resources, increment the version number. Browsers will fetch the new version, while returning users will load the cached copy if the version hasn’t changed.

内容的提问来源于stack exchange，提问作者Ben Gubler