Reduce js bundle size by eliminating duplicate sass rules. (#6050)
Reduce js bundle size by eliminating duplicate sass rules. (#6050)

Googlers, see http://b/25907487

http://go/tbpr/5951 increased the size of our Angular js bundle from
4,418,195 bytes to 5,440,612 bytes. The root cause was adding an
@include statement to a sass "Partial" file (_tb_theme.template.scss)
that is included by many many TensorBoard components. The contents of
the @included sass file were therefore duplicated many many times and
included many many times in our js bundle.

The Angular team advised us that "Partial" sass files should not contain
@include statements at the top-level. These particular @include
statements probably should really only be invoked once for the entire
application so we add them to the `tb-global-themed-styles()` mixin,
which is already included once in the project by
`tensorboard/webapp/styles.scss` and by other `style.scss` files written
internally at Google for other TensorBoard instances.

The impact on bundle size is impressive. The Angular js bundle
(tb_webapp_binary.js) is reduced to 3,216,597 bytes -- a decrease of
over 25% from the original size before http://go/tbpr/5951!
tensorflow/tensorboard,tensorflow/tensorboard,tensorflow/tensorboard,tensorflow/tensorboard,tensorflow/tensorboard,tensorflow/tensorboard,tensorflow/tensorboard