什么是公共 JS 库？
在前端开发中，我们经常需要使用一些通用的功能或者库，例如 jQuery、React、Vue 等等，这些库被称为公共 JS 库。通常情况下，我们会将这些库直接引入到项目中，但随着项目复杂度的提高，这样做变得越来越不划算，因为这些库会被反复下载，造成资源浪费和加载时间的延长。
另外，随着互联网的快速发展，访问国外网络可能会非常慢，因此我们需要一种方法来加速这些公共 JS 库的访问，也就是使用 CDN。
什么是 CDN？
CDN（Content Delivery Network）是一种提高网络访问速度的技术。它可以将网站的静态资源（如 JS、CSS、图片等）缓存到全球各地的服务器上，以供用户就近访问。这样可以有效地加快用户在访问网站时的速度，同时也减轻了本地服务器的压力。
Webpack plugin
在 Webpack 中，使用插件（plugin）可以扩展其功能，为我们提供更多的功能和处理静态资源的能力。使用插件可以使我们更加智能地处理资源，例如压缩、拷贝、提取公共模块等等。
打包前先准备好
在使用 Webpack 打包前，需要做一些准备工作。首先，我们需要安装 Node.js 和 NPM。可以在 Node.js 官网下载相关软件。其次，我们需要创建一个基本的项目结构。可以通过执行以下命令创建：
mkdir my-project cd my-project npm init -y
创建出项目后，我们可以手动创建一个 src 目录，并在其中创建一个名为 index.js 的文件，文件中随便写入一些代码作为例子。
CDNify Webpack plugin
要将公共 JS 库的访问优化至 CDN 上，我们可以使用 CDNify Webpack plugin。这个插件可以自动将打包出来的文件上传到 CDN 上，并将文件的链接写入 HTML 文件中，从而实现静态资源的加速。
我们可以通过 NPM 进行安装：
npm install --save-dev webpack-cdnify-plugin
安装完成后，在 webpack.config.js 配置文件中添加如下代码：
// javascriptcn.com 代码示例
const CdnifyWebpackPlugin = require('webpack-cdnify-plugin');
const webpackConfig = {
plugins: [
new CdnifyWebpackPlugin({
cdnUrl: 'https://cdn.example.com',
publicPath: 'https://cdn.example.com/my-project',
verbose: true,
uploadConcurrency: 3,
assets: ['**/*.{js,css}'],
}),
],
};配置项说明：
cdnUrl：CDN 的域名或者 IP 地址（必选）；publicPath：Web 站点中需要寻找资源的 URL（必选）；verbose：是否输出详细日志信息（可选，默认为 false）；uploadConcurrency：上传文件时的并发数（可选，默认为 3）；assets：需要上传的静态资源（可选，默认为所有以 .js 和 .css 结尾的文件）。
您可以根据自己的需求进行配置。
在执行打包命令后，CDNify Webpack plugin 会自动将打包出来的 JS 文件上传到 CDN 上，并将链接写入 HTML 文件中。在浏览器中访问 HTML 文件时，就可以直接从 CDN 上获取这些 JS 文件了。
总结
使用 Webpack 和 CDNify Webpack plugin 可以为我们提供一种优化公共 JS 库访问的方式，可以有效地缓解本地服务器的资源压力，同时也减少了用户访问时间。如果您在项目中使用了一些公共 JS 库，并且想要对其进行优化，那么这个方法会非常有用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65408a267d4982a6eba0b995