►
Description
PnP Short video guidance around how to exclude libraries from SharePoint Framework bundles.
A
Welcome
to
this
SharePoint
p.m.
page
short
video,
so
in
this
video
we'll
have
a
look
on
how
to
exclude
libraries
from
your
SharePoint
framework
bundle.
So,
first
of
all,
what
does
it
actually
mean
and
why
you
should
be
aware
of
this,
and
how
do
you
then
exclude
this
external
libraries
from
your
SharePoint
framework
solution,
bundles
and
I?
Let
vaulteq
mastercards
to
do
their
demo
on
this
one.
Well,
they
take
it
away.
Thank.
B
You
so
whenever
you
add
library
to
your
SharePoint
framework,
project
is
being
by
default
included
in
bundle.
So
what
does
is
it
means?
Let's
go
look
at
two
webparts
that
we
have
built
in
angular
and
then
we
have
added
to
workbench.
So
let's
have
a
quick
look
at
their
size,
let's
reload
the
workbench,
and
now
we
can
see
that
the
total
size
of
this
page
is
almost
8
met,
7x7
max
yeah,
so
and
that's
only
two
webparts
right.
So
with
that,
let's
have
a
look
at
the
bubbles
has
Isis.
B
Let
me
refresh
the
page
again
and
then,
when
we
heal
here,
filter
responses,
two
bundles
here
we
can
see
two
webparts
and
each
one
of
them
is
1.3
Meg.
So
that
means
a
web
part.
That
only
shows
some
images
and
documents
is
quite
big.
So
let's
have
a
look.
Why?
Let's
have
a
look
like
what
makes
the
web
parts
so
so
big
and
the
great
thing
is:
if
we
switch
back
to
code
here
in
the
the
project,
there
is
a
template
M
directory
and
in
it
there
is
a
stats
directory.
B
Where
there's
a
page
that
you
can
open
in
browser-
and
it
shows
exactly
what's
inside
bundle,
so
let's
do
exactly
that.
Let's
pull
this
one
here
and
let
me
switch
that
one
here
and
drag
it
here
to
browser,
and
now
we
can
see
when
we
pick
one
another
webparts.
Let
me
zoom
that
in
a
bit
when
we
pick
one
of
the
the
webparts,
we
can
now
see
that
it's
actually
it
proves
that
is
1.3
max,
and
here
we
can
see.
Each
of
these
rings
represents
dependency
that
we
include
in
bundle.
B
So
first
one
here
is
node
modules,
which
is
where
all
of
the
bundles
or
all
of
the
dependencies
that
we
reference
comes
from,
and
if
we
move
up
a
ring
now
we
can
see
that
it's
angular,
so
in
other
words,
we
now
embed
angular,
all
of
it
into
the
web
part
and
that
takes
by
itself
a
Meg.
So
now
now
you
know
why
right
we
have
two
efforts
on
a
page
and
each
of
them
embeds
angular,
so
that
that's?
Why
we're
only
we
load
angular
twice
but
but
we
actually
download
it
also
in
browser.
B
So
that
slows
down
loading.
The
page
a
lot,
so
what
can
we
do
about
that?
Well,
the
the
really
thing
is
that
in
SPF
X,
you
can
really
easily
say
that
dependency
that
you
want
to
use
is
external
one,
and
you
don't
want
to
include
it
in
bundle,
but
you
actually
want
to
load
it
from
a
URL
and
you
can
do
it
in
code.
B
So
when
we
switch
to
code
there
is
you
can
do
that
in
the
config
directory
configuration
and
there
is
a
section
called
exit
steps,
kernels
and
actually
the
best
part
is
that
when
you
choose
to
load
dependency
from
a
URL,
you
don't
need
to
change
anything
about
your
code.
The
code
stays
exactly
the
same.
You
only
say
that
dependency
X
should
be
actually
pulled
from
a
URL
and
not
including
bundle.
So
in
our
case
as
we
use
angular,
let's
define
this
regular.
B
So
the
way
it
works
is
that
first,
you
say
angular,
because
that's
the
name
of
the
dependency
and
now
you
have
two
ways
in
going
around
it.
So,
first
is
that
you
could
say
here
the
URL,
which
is
HTTP
some
CDN
or
another
one
is
you
say
like
it
and
you
say:
first
half
and
then
the
URL,
and
then
here
you
also
define
the
global
name,
and
that
would
be
for
angular
angular.
B
So
how
do
you
know
which
of
these
you
would
use?
Well,
it
depends.
It
depends
on
the
format
of
your
script
that
you
want
to
load.
Different
scripts
are
being
built
in
a
different
way
right.
There
are
modules
and
just
non
module
scripts
that
are
being
just
written
as
a
as
a
flash
lives
slightly.
It's
all
script
right
and
depending
which
format
you
want
to
use
you
want
to.
You
have
to
use
either
the
first
format
with
only
the
URL
or
the
one
that
you
see
now
on
the
screen.
B
So
the
first
thing
is,
you
have
to
know
which
format
the
script
that
you
are
trying
to
reference
is
in
right
and
you
you
only
wanted
to
do.
That
is
if
you
would
get
the
URL.
So
here,
let's
get
a
URL
to
angular
from
CDN,
open
that
in
browser
and
then
see.
If
you
can
figure
out
the
format
of
of
this
script
from
here,
you
probably
can't
I
cannot
do
here
so
to
make
it
easier.
B
There's
a
free
tool
that
you
can
use
available
at
rancor,
comm,
slash,
SharePoint
framework,
slash
script
check,
which
is
here,
and
we
will
include
the
URL
in
notes,
and
the
great
thing
about
it
is-
is
free
to
use,
and
the
only
thing
that
you
have
to
do
is
to
page
the
URL
get
it
analyzed,
and
then
you
will
know
not
only
this
format,
but
you
will
also
get
the
exact
snippet
of
code
that
you
have
to
use
in
project.
So
we
can
just
grab
that
go
back
to
our
externals
part.
B
Could
it
here
formatted
it
and
then
change
my
library
to
angular
and
we're
done
right
so
with
that
we
have
exactly
the
right
type
of
code,
because
otherwise
you
would
probably
have
to
try
one
see
if
it
works.
If
it
does
not,
you
have
to
try
another
one
and
that's
not
really
efficient
way
to
go
around
all
right.
So
with
that
we
defined
angular
as
an
external
script.
How
about
we
rebuild
the
project?
B
We
stop
that
we
say:
go
unload
to
actually
rebuild
rebounded
the
project
and
that
what
we
can
do
is
we
can
analyze
this
task
and
see
how
much
things
improved
so
remember.
Initially,
we
had
1.3
Meg's
per
web
part.
Now,
if
we
go
here
and
we
refresh
the
generated
stats,
you
can
now
see
that
the
web
part
is
actually
32k
each.
B
If
you
choose
to
use
exactly
the
same
location
for
all
your
script,
you
will
be
able
to
slim
down
the
size
of
the
whole
internet,
a
lot
right,
because
you
will
pull
down
an
Euler
or
jQuery
or
knockout
or
anything
else
that
that
use
once
it
will
be
cached
and
then
the
only
thing
that
would
that
will
be
actually
pull
down.
Is
the
web
part
itself?
So
with
that
you
will
improve
how
fast
things
load
a
lot.