►
Description
This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on December 5, 2019.
In this 14-minute video, Office 365 developer Vincent Biret shows the new Office 365 CLI command called "O365 SPFx Project Externalize" that scans for and suggests external dependencies that can be referenced externally rather than being included in the bundle. This allows developers to create a more compact and performant SPFx solution bundle. In the example, header size was reduced by 80% as a result of not including dependencies in the bundle. This is all about externalizing dependencies in SPFx projects.
Presenter: Vincent Biret (2toLead) | @baywet
Supporting materials:
• Documentation: https://pnp.github.io/office365-cli/cmd/spfx/project/project-externalize/
All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2
Learn more about the SharePoint developer community at: http://aka.ms/sppnp
A
All
right
so
talk
about
the
office,
365
CLI,
new
command
called
office,
365
SPF,
X
project
externalize.
Before
we
begin
hi
everyone,
I'm,
Vincent,
IRA
nice
to
meet
you
I'm,
an
office
dev
MVP
and
I
work
at
to
Toledo
Canadian
based
consulting
company
as
an
azure
and
office
365
developer.
If
you
know
reach
out
to
me
here,
is
my
Twitter
and
github
handle
my
blog
and
yeah.
You
can
always
contact
me
I'll
be
happy
to
answer
any
of
your
questions
with
that.
Well,
Patrick
already
pointed
to
a
a
problem:
an
existing
problem.
A
So
you
want
to
avoid
that
in
order
to
provide
good
performances
and
good
experience
for
me
and
users,
what
solutions
do
you
have?
Well,
you
have
the
one
that
Patrick
just
shown
the
selective
import,
meaning
that
you'll
be
really
careful
at
the
import
time
to
import.
Only
what
you
need-
and
this
is
great
when
you
this-
is
actually
probably
the
best
solution.
A
If
you
want
a
net
new
project
and
you
don't
need
to
reflector
tons
and
tons
of
code,
so
the
problem
with
that
is
developers
need
to
be
super
well
disciplined,
and
if
you
need
to
know
about
that
and
do
it
across
resolution
or
otherwise,
you
need
to
do
big
refactoring
existing
solutions.
The
other
pattern
we
see
and
which
works
quite
well,
is:
let's
say
you
have
a
couple
of
different
webparts.
We
all
depend
on
the
pnp
controls
and
in
order
to
save
space
and
loading
time
and
so
on
and
so
forth.
A
Well,
you
create
separate
chunks,
separate
modules
that
you
will
load
and
synchronously.
So
this
is
a
great
technique
as
well.
It
involves
refactoring
lots
of
testing
to
make
sure
it
loads
properly
at
the
right
sequence
at
the
right
time
and
pretty
high
technical
knowledge.
You
can
all
use
library
components
if
you
want
with
those.
Lastly,
you
have
a
third
option,
which
is
called
externals.
So
what
pack
and
the
sharp
one
framework
have
this
notion
of
hey?
This
is
a
dependency
I,
don't
want
it
as
part
of
my
bundle.
A
I
will
load
it
from
a
fourth
party
CDN
instead,
so
don't
include
it
in
my
bundle
and
load
the
URL
I'm
going
to
provide
you
from
the
CDN
instead
during
the
runtime.
So
everything
is
on
the
page
and
that's
a
great
way
to
decrease
the
size
of
your
bundle
and
make
sure
you
hit
good
performances
and
so
on
so
forth,
and
it
does
not
require
any
refactoring
or
any
big
discipline
for
developers
or
any
kind
of
advanced
technical
knowledge.
A
So
this
is
again
one
of
the
solutions
to
do
that
and
I'll
show
how
you
can
improve
that
experience.
So,
let's
jump
into
the
demo
here,
you'll
see
that
I
have
a
straight
communication
site,
but
I
do
also
have
here
on
the
top.
You
know
custom
navigation,
because
everyone
does
that
akley
I
also
have
on
the
footer
custom
footer
bar
with
just
the
logo
of
a
company
and
learn
more
and
if
you
have
real
components
right.
This
is
great.
A
But
if
we
look
at
the
performances
we'll
see
that
in
the
network
traffic
to
morning
on,
if
we
reload
that
everything
is
being
loaded
from
from
SharePoint,
we
don't
have
anything
being
loaded
from
a
CDN
and
it
can
actually
take
quite
some
time
because
again
I'm
on
a
conference
Wi-Fi
at
the
moment.
Right
if
we
look
at,
for
example,
the
header
component
here,
we'll
see
that
if
I
find
the
right
one,
it's
pretty
heavy
right,
we
for
the
header.
We
just
have
a
few
links.
Well,
they
look
nice.
A
We
have
a
proper
CSS
classes
and
the
proper
icons-
and
we
don't
even
have
a
search
bar
here
available,
but
still
like
just
for
that,
we
are
paying
a
cost
of
150
free
kilobytes
and
the
reason
is
because
again
we
do
have
a
lot
of
fur
dependencies
in
our
bundle.
And
how
can
you
investigate
that
and
what
your
band
will
contain?
Well,
there
is
a
great
documentation
already
available
on
the
SharePoint
dev
Doc's
you'll
find
a
nautical
around
about
web
pack,
bundle
analyzer.
That
will
help
you
understand.
A
What's
in
your
bundle
now,
if
we
look
at
my
project
here,
for
my
header,
for
example,
my
header
is
1.5
megabyte
before
compression
and
so
on
and
so
forth,
but
a
big
part
of
that
is
actually
the
module.
1.4
35
megabytes
is
in
the
module.
So
most
of
the
weight
of
my
bundle
at
the
end
of
a
today
is
my
modules
and
my
dependencies
doing
not
my
actual
code.
A
So
how
do
you
do
that?
Well,
if
you
look
at
your
SharePoint
framework
solution
here,
you
will
see
that
you
have
a
config
that
JSON
file
available
and
you
have
this
entry
external.
So
this
is
where
you
will
tell
the
shopping
framework:
hey,
don't
include
those
dependencies
in
the
bundle
you're
creating
instead
at
runtime
load
those
from
the
CDN
but
but
can
be
pretty
tedious.
You
know
to
scan
for
all
the
modules
all
the
dependencies
know
if
there
are
valid
or
not
how
to
include
them
properly.
Hence
the
command
we're
introducing.
A
Actually,
it's
already
finished.
Let's
look
at
the
report
here
and
you
will
see
that
you
will
get
automatically
if
I
get
this
out
of
the
way
and
that
out
of
the
way
as
well,
you
get
automatically
that
markdown
report.
That
tells
you
all
right
here
is
your
external
configuration
that
you
should
put
and
additionally,
if
you
need
to
make
other
changes
like,
for
example,
TMP
GS
v1,
if
you
want
to
externalize
the
dependencies,
you
also
need
to
add
blend
require
statements
here.
So
here
is
what
we
think
you
should
do
and
that's
implement
it.
A
So,
of
course,
it's
not
going
to
be
perfect.
It's
only
going
to
do
85,
90
percent
of
a
job.
You
might
need
to
do
some
adjustments
so
here
to
save
time,
I
will
see
I'll
check
out.
Another
branch
emitting
I
verified
that
I
made
a
small
adjustments
that
were
required
and
if
we
look
at
our
config
dot
JSON,
we
can
see
that
now
in
under
externals,
we
have
all
the
configuration
we
need
for
all
the
different
packages
right.
So
if
now
we
do
run
the
and
I
hope
this
is
going
to
execute
fast.
A
A
A
I'll
move
on
and
come
back
to
that,
come
back
to
that
when
this
is
finished,
so
basically,
what's
gonna
happen,
we
will
have
our
solution.
That's
going
to
be
much
smaller
with
all
those
external
dependencies
outside
of
a
package.
Well,
it's
doing
that
and
we
will
then
be
able
to
upload
that
so
new
solution
in
that
new
package
to
our
SharePoint
tenant
and
deploy
that
new
package
and
what
we
will
see
effectively
when
this
finishes
is
that
our
package
is
first
much
smaller
and
second,
that
it
pulls
dependencies
from
unpackage.
A
A
It's
it's
actually
runs
left
bundle
period.
It's
when
you
bundle
your
solution.
This
is
when
webpack
puts
all
the
bits
and
pieces
of
JavaScript
together
and
that
will
generate
file
for
you.
So
you
need
to.
In
order
to
get
that
report,
you
need
to
run
of
a
command
I'm,
just
running
which
is
first
built
and
then
bundle-
and
this
is
how
you'll
get
the
new
report
and
I
don't
know.
A
Thank
you
for
the
great
question.
I,
don't
know
West
that
question.
So
if
we
look
at
that
now,
if
we
reveal
this
in
the
Explorer
and
if
we
go
back
to
ship
online
here,
I
can
go
to
my
catalog
here
drop
my
solution
and
what
you'll
see
is
it's
in
French,
of
course,
because
I
forgot
to
change
the
language,
but
besides
that
it
will
tell
me
hey:
do
you
want
to
replace
that
solution?
Which
I
will
say?
Yes,
now
it's
saying
hey,
you
have
dependencies
coming
from
a
kg
calm.
A
A
That
we'll
see
that
here
we
should
see
network
activity
coming
from
unpackage
e,
for
example.
Yes,
so
you'll
see
that
now
I
have,
for
example,
low
G,
asleep
and
a
few
other
things
like
pee
and
PJs
being
loaded
from
our
CDN
instead
and
if
we
look
at
our
header
again
here,
our
header
component,
which
is
here
now,
instead
of
being
150
K,
it's
only
36
case.
A
So
the
performances
and
the
experience
for
the
end
users
will
be
much
better
and
much
greater
and
with
that
before
I,
finish,
I'll
just
recap
and
then
hand
it
over
back
to
you
to
you
Patrick.
So
what
this
comment
does
for
you.
First,
it
checks
all
the
dependencies
on
the
package
of
JSON.
Then
it
answers
that
we
have
a
CDN
version
of
that
available
somewhere
on
unpackaging.
A
It
tests
the
module
automatically
for
you,
easy
to
the
name,
D
d6
global
package
and
so
on
and
so
forth,
and
thanks
to
the
rain
cores,
API
so
again,
big
thanks
to
to
rancor
and
it
tries
to
obtain
automatically
the
minified
version,
because
package
e
might
have
multiple
versions
of
the
same
library.
So
we
are
trying
to
make
sure
that
we
get
the
smallest
version
possible.
A
Then
it
checks
that
that
file
actually
exists
on
the
CN,
we'll
make
sure
that
we're
not
suggesting
you
any
dependency
that
well
doesn't
exist
at
the
end
of
the
day
and
it
generates
the
external
and
tree
configuration
as
well
as
we
offer
valid
suggestions
that
we
might
have
for
you,
big
thanks
to
Waldeck
and
valine,
who
helped
me
through
the
pull
requests
and
reviewing
the
code
and
making
suggestions
and
so
on
to
port.
Without
then,
it
will
not
have
been
possible.
It's
a
great
demonstration
of
the
great
community
effort
and
community
work.