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

Question

I have used PageSpeed Insights and struggled with manual tricky/ad-hoc optimizations based on its results. I am excited about using new PageSpeed Optimization Library/Service.

I have a single page application( SPA ) using AngularJS. Which is built using Service Oriented Architecture( SOA ). Have some questions,

• What kind of optimizations PageSpeed Service can do for SPA ?
• What pagespeed filters I should/shouldn't use ?
• [In case of PageSpeed Service ] How does AJAX requests (to my webservice) work with same-origin policy ?
• [In case of PageSpeed Service ] Should my webservice also be running in the same google's pagespeed servers ?

Answer 1

Here's some things I've learned and tried:

1) Are you interested in changing your SPA app?

No:

What kind of optimizations PageSpeed Service can do for SPA ? You'll have to read the docs.

What PageSpeed filters should you use? Start with the defaults. Do black-box testing of your whole app. Then start to tweak the settings. Measure the performance gains, so you can be aware of the rapidly diminishing returns of optimization.

Yes:

Check out the PageSpeed extension for Chrome. Following the suggestions will help alot.

You can use a build tool like grunt or gulp to transform your app's code into optimized code. It's a big topic, but here's an example for AngularJS with 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'))

This code:

• lists all the files in config.app.js directory
• annotates the contents with angular dependencies
• sorts them by angular dependencies
• minifies them (if configured)
• concatenates them (if configured)
• adds a filesize hash to the filename (app-4223423.js) for cache-busting (if configured)
• copies them to a folder.

Below I inject them into my index.html with this code. See where appJs is defined above and used below:

  // 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))

This makes a configurable build script that can make a high performance app. PageSpeed only complains about how much js I'm loading, but well, that's part of using AngularJS.

[In case of PageSpeed Service] How does AJAX requests (to my webservice) work with same-origin policy ?

PageSpeed Service isn't accepting new users. There is a plugin to your webserver. So it should work the same. Otherwise you'll probably need to enable CORS .

[In case of PageSpeed Service] Should my webservice also be running in the same google's pagespeed servers ?

I don't know :-) You'll have to check with the service instructions.