1

我使用了PageSpeed Insights，并根据其结果进行了手动棘手/临时优化。我对使用新的 PageSpeed 优化库/服务感到很兴奋。

我有一个使用 AngularJS的单页应用程序（SPA ）。它是使用面向服务的架构 ( SOA ) 构建的。有一些问题，

  • PageSpeed 服务可以为 SPA 做什么样的优化？
  • 我应该/不应该使用哪些 pagespeed 过滤器？
  • [在PageSpeed 服务的情况下] AJAX 请求（对我的网络服务）如何使用同源策略？
  • [在PageSpeed 服务的情况下] 我的网络服务是否也应该在同一个 google 的 pagespeed 服务器上运行？
4

1 回答 1

0

以下是我学到并尝试过的一些事情：

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 服务的情况下] AJAX 请求（对我的 web 服务）如何使用同源策略？

PageSpeed 服务不接受新用户。您的网络服务器有一个插件。所以它应该工作相同。否则，您可能需要启用CORS。

[在 PageSpeed 服务的情况下] 我的网络服务是否也应该在同一个谷歌的 pagespeed 服务器上运行？

我不知道 :-) 您必须查看服务说明。

于 2015-04-01T03:57:38.010 回答