首页 > 建站教程 > 前端框架 >  webpack5学习笔记:CDN、DLL_shimming正文

webpack5学习笔记:CDN、DLL_shimming

# CDN

## 解释

1. CDN称之为内容分发网络(Content Delivery Network 或 Content Distribution Network)

    它指的是通过相互连接的网络系统,利用最靠近每个用户的服务器

    更快、更可靠的将多媒体、应用程序等发送给用户

    来提供高性能、可扩展及低成本的网络内容产地给用户


## 开发中主要使用CDN的方式

1. 将打包的所有静态资源放到CDN服务器去

2. 一些第三方的资源直接使用CDN的地址


# 购买CDN服务器

1. 购买阿里、腾讯、谷歌等的CDN服务器,将自己的代码资源放到上面去

2. 修改publicPath,打包时,添加上自己的CDN地址,webpack.config.js配置方式:

```

output: {

    filename: '[name].bundle.js', // 这里的 name 对应 entry 配置的 key

    path: resolveApp('./build'),

    // 打包时,index.html的js地址前会拼接上配置的地址

    publicPath: 'https://cdn.5imoban.net'

},

```



# 第三方库的CDN

1. 通常比较知名的开源框架都会将打包后的源码放到一些比较出名的、免费的CDN服务器上

    国际上使用比较多的如unpkg、JSDelivr、cdnjs

    国内比较好的,如 bootcdn

2. import、require导入的 node_modules ,打包后,都在本地,不在cdn上


## 如何使用第三方库的CDN

1. webpack.config.js 中配置需要用CDN 的第三方库不要进行打包

```

externals: {

    // key 为不需要打包的第三方库的名字,value 为这个库的全局对象名称

    lodash: '_',

    dayjs: 'dayjs'

},

```

2. 在模板文件 index.html 中引用这个js,注意,打包的js可能依赖cdn里的代码,但是,打包的js,在引入时,有 defer="defer",这个就是使用到才会执行引入文件的代码,所以,肯定会在 cdn代码之后执行。

```

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

```


## 上面的做法,有缺陷,在本地运行时,也会使用CDN

1. 将下面代码放到生产环境下:

```

module.exports = {

    mode: 'production',

    externals: {

        // key 为不需要打包的第三方库的名字,value 为这个库的全局对象名称

        lodash: '_',

        dayjs: 'dayjs'

    }

}

```

2. 对模板文件 index.html 的 CDN 进行判断:

```

<% if(process.env.NODE_ENV === 'production') { %>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

<% } %>

```



# shimming 预支全局变量,仅作了解,通过 webpack.ProvidePlugin() 插件来实现