►
From YouTube: Community Demo - Optimizing SPFx extension performance with dynamic loading of CSS styles
Description
Community demo from the SharePoint Framework Special Interest Group recording at 17th of January 2019.
Presenter - David Warner II (Catapult Systems) - @davidwarnerii
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
Fantastic
all
right,
so
here's
my
contact
information,
I
know
a
lot
of
you
folks
on
here
so
feel
free
to
reach
out
to
me.
If
you
have
any
questions,
but
let's
jump
right
in
so
today,
I'm
gonna
demo,
how
you
can
combine
the
SharePoint
framework
and
dynamic
CSS,
specifically
on
optimizing
SPF
ex
extension
styles,
so
I'm
not
sure
if
there's
any
new
new
ones
on
the
call
feel
free
to
chime
in.
A
If
this
is
your
first
time,
if
you're,
fairly
new
to
SharePoint
framework
development
would
good
good
to
know
we're
gonna
cover
some
of
the
high-level
basic,
real,
quick
CSS
vs.
sass
and
some
of
that
we're
gonna
see
how
within
sass
you
can
have
modules
versus
non
modules
and
then
specifically
we're
going
to
see
how
we
can
optimize
those
Styles.
So
we're
gonna,
look
at
some
targeted,
CSS,
hash
lists,
class,
name,
preservation,
boy,
that's
a
mouthful,
but
it'll
make
perfect
sense.
A
Once
we
show
it
to
you,
then
we're
gonna
say
we're
gonna
optimize,
the
bundling
of
our
Styles.
Now
that
sounds
weird.
What
style
is
doing
in
j/s
if
you're
new,
that
may
some
kind
of
phone
forum,
but
we'll
see
exactly
how
that
works?
And
then
we're
gonna
see
how
we
can
dynamically
load
those
Styles,
so
that
we're
not
overloading
our
clients
browser?
So
what's
the
use
case
that
we're
going
to
use
this
strategy
and
there's
lots,
but
a
few
of
them,
and
today,
specifically
we're
going
to
see
an
application.
A
Customizer
extension
we're
gonna,
look
at
how
we
can
utilize
some
pseudo
styles
of
pseudo
styles,
if
that
sounds
unfamiliar
to
you
or
styles,
that
you
use
for
things
like
hover
and
active,
so
we're
gonna
highlight
today
how
we
can
use
shadows
and
glows.
You
can
also
use
them
for
animations
the
use
cases,
strategies
where
you
can
use
them
list,
formatting
we'll
see
that
today
specifically,
but
you
can
also
use
them
in
your
custom
web
parts.
Other
extensions
aka,
specifically
where
you
own
the
HTML.
A
A
I've
got
a
list
of
some
PNP
community
members,
and
this
is
using
a
view,
style
definition
and
it's
just
styling
some
information
in
the
list,
but
what
we
would
like
to
do
is
we'd
like
to
add
some
styles
that
allow
us
to
provide
some
of
those
hover
States
to
things
like
these
buttons
here.
So
we've
got
these
little
buttons
here
that
are
generated
by
our
view,
definition
and
we're
gonna
highlight
specifically.
A
We
know
that
if
I
come
in
here
and
look
at
the
element,
we
can
see
that
I've
got
this
PNP
hover
button
style
right
down
here,
so
we're
gonna
Keyon.
That
element-
that's
gonna,
be
part
of
our
CSS
today
and
we
want
to
apply
some.
Some
nice
effects
apply
them
I'll,
let
them
mute!
Thank
you
will
apply
some
nice
effects
to
these
when
we
hover
over
them
and
we'll
use
an
extension
to
do
that.
So
let's
go
ahead
and
hop
into
visual
studio
code.
A
Now,
what
we
see
is
just
a
basic,
very
basic
out-of-the-box,
scaffolded
extension
application,
customizer
extension
and
over
here
in
our
Styles
folder
of
creator,
Styles
folder
we've
got
a
collection
of
style
files,
some
plain
CSS,
some
sass,
some
modular
sass,
some
non
modular,
and
what
we'll
see
what
that
means
so
we're
gonna
start
we're
gonna
move
through
some
of
the
basics,
real
briefly,
just
for
those
that
are
maybe
new.
So
you
have
a
good
foundational
understanding
and
we're
gonna
start
with
our
button
shadows.
A
Css
now
is
just
a
plain
CSS
file
and
you
can
include
plain
CSS
files
in
your
extension.
If
you'd
like
not
the
most
robust,
there's,
definitely
some
limitations,
but
all
of
our
Styles
follow
pretty
much.
In
this
example,
the
same
concept
we've
got
things
like
section
body,
section,
header,
site
body,
site
header.
As
you
can
imagine,
those
are
fairly
basic
names.
It
could
very
likely
conflict
with
another
third-party
style
or
some
other
web
part
or
some
other
extension.
There
could
be
a
collision
there
and
so
we'll
we'll
see
how
we
can
fix
that.
A
And
so
that's
what
was
just
generated
right
here
is
our
JavaScript,
which
will
then
insert
those
styles
into
the
head.
So
if
we
come
on
over
to
the
generated
file-
and
we
do
a
search,
then
we
we
see
all
of
our
Styles
now
add
it.
There's
a
lot
more
Styles,
obviously
in
that
file
than
then
I
showed
I
have
most
of
them
down
to
the
bottom
and
that'll
be
a
point
made
here
soon,
but
we
see
it's
now
included
them,
but
this
is
just
plain
CSS.
We
don't
really
take
advantage
of
the
sass
again.
A
What
about
our
collisions?
We
we
might
want
to
include
variables
so
obviously
not
the
best
option
but
unavailable
option.
So
let's
go
ahead
and
close
our
j/s
and
we'll
go
ahead
and
take
a
look
at
our
non
module
sass
file.
Now
this
is
a
little
different
in
that
we're
because
it
is
a
sass
file,
we're
now
able
to
utilize
variables.
A
So
you
can
see
I've
created
a
variable
here,
very
simple,
to
do
very
simple
examples,
just
to
kind
of
illustrate
the
purpose
I've
defined
a
shadow
color
and
then
I've
used
this
down
here
in
my
hovered
declaration,
so
that
can
be
applied,
and
now
these
could
come
from
other
files.
We
can
have
multiple
much
more
robust
architecture
here,
and
so
what
we
want
to
do
is
we
want
to
now
include
this
replace
the
CSS
and
so
I'll
just
go
ahead
and
paste
in
the
importation.
A
It's
going
to
look
pretty
much
identical,
with
the
exception
of
calling
in
the
non
module
and
I'll
go
ahead
and
save
now,
when
we,
when
we
generate
this,
and
it's
gets
generated.
Of
course,
what's
going
on
in
the
background
through
my
gulp
serve,
is
that
it's
being
web
packed
and
it's
going
to
be
generated
again
in
here?
A
So
if
I
come
back
in
and
do
another
search
on
on
style,
we
can
see
that
that's
showing
up
and
we
come
down
to
our
hover
and
we
can
see
that
that
color
we
were
using
is
included
because
it
was
executing
on
on
the
variable.
So
again,
though,
we
have
our
problems
where
there
could
be
a
collision
on
these
very
basic
named
CSS
class
names.
So
we
want
to.
We
want
to
fix
that,
want
to
take
advantage
of
a
more
robust
importation
strategy
and
that's
where
these
modules
come
in
you'll
notice.
A
The
only
differential
between
the
name
and
the
non
module
and
the
module
is
a
dot
module,
so
we'll
go
ahead
and
include
that
we'll
replace
these
and
we're
going
to
include
both
of
them.
Now
we're
going
to
include
both
the
non
the
shadows
and
the
glows
and
we'll
go
ahead
and
click
Save.
Now,
what's
going
to
happen,
is
it's
going
to
do?
What's
called
hashing,
it's
going
to
add
on
a
dynamic
name
to
the
end
of
our
class
names.
So
that
way
we
don't
actually
have
any
collisions.
A
A
And-
and
so
if
you
were
actually
writing
HTML
in
this
or
if
you
were
doing
this
inside
of
a
web
part,
then
you
might
actually
be
writing
HTML
down
here
at
the
bottom
and
and
we
could
name
these
modules,
so
I
could
come
in
and
change
this
to
be
button
from
and
now
you
can
see
that
it's,
including
it
and
I,
can
actually
come
in
here
and
say:
Styles
button,
shadows,
dot
and
it'll.
Give
me
access
to
all
those.
A
So
if
I
was
writing
HTML
in
here
and
needed
to
access
those
styles
that
that's
a
way
I
can
do
it
and
there's
some
really
good
documentation,
so
I
won't
go
too
deep.
This
has
all
been
very
basic
documentation
or
information
that
you
can
get
already
in
the
documentation,
just
good
for
some
some
newbies,
but
in
this
case
in
in
list
formatting
we
actually
want
to.
We
want
to
preserve,
maybe
that
more
robust
style,
name
or
class
name
that
we
saw
inside
of
our
modules
files
for
shadows
and
buttons.
A
A
A
That's
up
there
so
now,
we've
done
that
to
both
our
button
glows
and
our
button
shadows
and
we'll
go
ahead
and
let
webpack
come
in
and
if
we
go
back
into
our
customizer
and
do
a
search
there,
you
go
it's
already
taking
it
to
us
and
it's
all
your
fresh.
We
see
we
still
have
the
hashing
on
our
there
we
go.
A
We
still
have
the
hashing
on
our
generically
named
ones
that
we
were
ok
providing
that
hashing
to,
but
we
don't
have
it
on
our
PNP
hover
style,
button,
hover
style
so
now
I
could
still
use
this
more
verbose.
Name,
that's
likely
to
have
no
conflict
right.
You
can
name
them
more
verbose,
Li,
so
that
there's
a
very
virtual,
no
chance
of
having
a
conflict
with
another
another
style,
solution
or
web
part,
or
something
like
that
now.
A
What
if
we
wanted,
though,
to
dynamically
call
in
right
so
in
this
case
we're
using
a
couple
of
glows
shadows.
These
are
both
as
you
can
see,
that
there's
a
lot
more
Styles
being
loaded
in
here
and
we
only
want
one
or
the
other.
We
only
want
to
include
the
glows
module
or
we
want
only
want
to
include
the
styles
or
the
shadows,
module
so
we'll
come
back
in
and
we
can
actually
utilize
properties
within
our
extension,
so
I've
already
created
one
here
called
included
styles.
A
A
Go
ahead
and
save
that
there
we
go
should
be
saving
fine
and
it's
looking
for
whether
or
not
I'm
going
to
pass
button
styles
or
button
glows
and
and
the
problem
is
that
we
can't
actually
do
an
import.
It's
giving
an
error
in
the
wrong
place.
But
it
should
be
giving
an
error
on
the
import
here.
So
we
could
change
that
actually
to
require.
A
B
A
B
A
A
B
A
So
so
now
it's
included,
and
if
we
were
to
come
into
here,
we
can
see
that
if
I
do
a
search
here,
we
can
see
that
it's
still
there.
Everything
is
what
packed
we
even
see
a
new,
a
new
hash
value
there,
but
the
problem
is
that
it's
twice
the
size,
so
this
will
actually
work
if
I
were
to
go
over
and
pass
this
property
as
a
past
this,
this
value
as
a
property,
it
will
load
one
or
the
other
button
shadows
or
button
glows.
But
if
we
come
over
to
our.
A
As
collections
of
styles
right
here,
and
so
we
don't
actually
want
to
do
that
because
we
only
want
to
load
one
of
the
other,
it's
only
going
to
load
one
of
the
other,
but
it's
still
including
it
in
the
bundle.
So
there's
a
very
cool
feature
called
a
type
skip.
Try
excuse
me
type
script,
import
expression.
If
we
change
these
to
import
instead
of
require-
and
we
save
pay
attention
to
the
distribution
folder
over
here.
What's
gonna
happen,
is
it's
not
going
to
split
those
out
into
multiple
files?
A
We've
seen
this
done
in
a
web
part
before
like
when
we've
clicked
on
a
button
or
something
like
that.
But
now
you
can
see
what's
happened,
is
it
split
them
individually
into
multiple
files?
So
now,
if
we
come
back
to
our
distal
der
here,
we
can
see
we've
got
smudge
smaller,
multiple
files,
much
smaller,
and
these
can
then
be
called
into
the
browser
dynamically
based
on
our
value
being
passed
in
the
property
right.
So
let's
take
a
look
and
see
how
that
looks
actually
in
the
browser.
A
So,
let's
go
back
we'll
close
this
one
we'll
bring
up,
so
we
can
actually
see
the
network
go
localhost
so
that
it
filters
on
localhost
and
what
I've
done
is
I've
already
pre-populated.
The
arguments
needed
here
to
include
those
files,
so
I've
got
include
styles
and
button
shadow,
so
I'm
gonna
go
ahead
and
refresh
it's
gonna.
A
Let
me
know
it
wants
me
to
authorize
loading,
my
scripts
so
we'll
say
yes
and
now
we
can
see
that
it's
loaded,
just
the
0.04
shadows
and
if
I
hover
over
our
warrior,
Horse
Whisperer
Chris
Kent,
all
right,
our
buttons
are
working.
We
got
myself
Bo
the
show
and
now
that's
working
and
it's
only
loading
the
0.0.
So
we
can
go
up
and
change
that
to
glow
I'll
change
it
to
button
glows.
A
And
we'll
load
the
debug
script,
and
now
you
can
see
it's
bringing
in
1.1,
so
it's
not
bringing
in
the
shadows
and
if
I
hover
over
email
warrior
horse
whisperer
right,
then
it's
working
and
it's
only
loading
in
the
necessary
ones,
and
so
let's
go
ahead
and
let's
actually
send
a
message
over
to
our
favorite
warrior
horse
whisperer.
We
need
some
help.
I'll
go
ahead
and
load
that
here
and
if
we
have
any
three
amigos
fans
we
we
know
his
warrior
horse.
A
Whisperers
are
very
great,
so
we
want
him
to
come
to
Santa
poco
put
on
show
stop
the
famous
infamous
El
Guapo,
because
we
all
know
what
infamous
means
more
than
famous
and
the
warrior
horse.
Whisperer
is
needed.
So
a
pretty
cool
feature
here.
You
know
again,
you
can
use
these
in
multiple
ways
with
a
webpart
extensions
and
there's
lots
of
ways
to
creative.
This
sample
was
just
very
basic
just
to
illustrate
that
the
value
of
things
like
the
import
expression
or
the
global
option
within
SAS
there
to
to
provide
a
targeted
hash
list
opportunity.