Question

我使用了 PageSpeed Insights ，并根据其结果与手动棘手/临时优化进行了斗争。我很高兴使用新的PageSpeed优化库/服务。

我有一个使用AngularJS的单页应用程序（SPA）。这是使用面向服务的体系结构（SOA）构建的。有一些问题，

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

Answer 1

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

1）您是否有兴趣更改SPA应用程序？

没有

PageSpeed Service可以为SPA做些什么样的优化？你必须阅读文档。

您应该使用哪些PageSpeed过滤器？从默认值开始。对整个应用程序进行黑盒测试。然后开始调整设置。衡量绩效增益，这样您就可以了解优化的快速收益。

是：

查看Chrome的PageSpeed extension。以下建议将有所帮助。

您可以使用像grunt或gulp这样的构建工具将应用程序的代码转换为优化代码。这是一个很大的话题，但这里是AngularJS与Gulp的一个例子：

  // 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请求（对我的网络服务）如何使用同源策略？

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

[如果是PageSpeed服务]我的网络服务是否也应该在同一个google的pagespeed服务器上运行？

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

PageSpeed服务/图书馆如何帮助单页应用程序（SPA）？

1 个答案: