PageSpeed服務/庫如何幫助單頁應用程序（SPA）？

Question

我使用了PageSpeed Insights，並根據結果難以進行手動的棘手/臨時優化。 我對使用新的PageSpeed優化庫/服務感到很興奮。

我有一個使用AngularJS的單頁面應用程序（ SPA ）。 使用面向服務的體系結構（ SOA ）構建的。 有什么問題

• PageSpeed服務可以為SPA做什么樣的優化？
• 我應該/不應該使用哪些pagespeed過濾器？
• [在使用PageSpeed服務的情況下]（對我的Web服務的）AJAX請求如何與同源策略一起使用？
• [如果使用PageSpeed服務 ]我的網絡服務是否也應該在同一Google的pagespeed服務器中運行？

Answer 1

這是我學過並嘗試過的一些東西：

1）您是否有興趣更改SPA應用程序？

沒有：

PageSpeed服務可以為SPA做什么樣的優化？ 您必須閱讀文檔。

您應該使用哪種PageSpeed過濾器？ 從默認值開始。 對整個應用程序進行黑盒測試。 然后開始調整設置。 衡量性能提升，這樣您就可以知道優化收益迅速減少的情況。

是：

查看Chrome的PageSpeed擴展程序。 遵循建議將有很大幫助。

您可以使用grunt或gulp等構建工具將應用程序的代碼轉換為優化的代碼。 這是一個很大的話題，但這是帶有Gulp的AngularJS的示例：

  // Make sources.  Uglify, Concat, and add hash if necessary
  // Determine output file.  Only used if config.concat === true
  var destJs = 'app' + (config.minify?'.min':'') + '.js';
  var appJs = gulp.src(config.app.js)
  .pipe(plugins.plumber())
  .pipe(plugins.ngAnnotate())
  .pipe(plugins.angularFilesort())
  .pipe(plugins.if(config.minify, plugins.uglify()))
  .pipe(plugins.if(config.concat, plugins.concat(destJs)))
  .pipe(plugins.if(config.hash, plugins.hash()))
  .pipe(gulp.dest(config.app.dest + '/js'))

這段代碼：

• 列出config.app.js目錄中的所有文件
• 用角度依賴性注釋內容
• 按角度依賴性對它們進行排序
• 縮小它們（如果已配置）
• 連接它們（如果已配置）
• 將文件大小哈希添加到文件名（app-4223423.js）以進行緩存清除（如果已配置）
• 將它們復制到文件夾。

在下面，我使用此代碼將它們注入到我的index.html中。 查看上面定義appJs並在下面使用的地方：

  // Inject all these files into index.html
  return gulp.src(config.app.index)
  .pipe(plugins.plumber())
  .pipe(plugins.inject(vendorJs, _.merge({name: 'vendor'}, config.app.injectOptions)))
  .pipe(plugins.inject(vendorCss, _.merge({name: 'vendor'}, config.app.injectOptions)))
  .pipe(plugins.inject(appJs, _.merge({name: 'app'}, config.app.injectOptions)))
  .pipe(plugins.inject(appCss, _.merge({name: 'app'}, config.app.injectOptions)))
  .pipe(plugins.inject(templates, _.merge({name: 'templates'}, config.app.injectOptions)))
  .pipe(plugins.replace('REPLACE_NODE_ENV', config.NODE_ENV))
  .pipe(gulp.dest(config.app.dest))

這使得可配置的構建腳本可以生成高性能的應用程序。 PageSpeed只抱怨我正在加載多少js，但這是使用AngularJS的一部分。

[在使用PageSpeed服務的情況下]（對我的Web服務的）AJAX請求如何與同源策略一起使用？

PageSpeed服務不接受新用戶。 您的網絡服務器上有一個插件。 因此，它應該工作相同。 否則，您可能需要啟用CORS 。

[如果使用PageSpeed服務]我的網絡服務是否也應該在同一Google的pagespeed服務器中運行？

我不知道:-)您必須檢查服務說明。