如何将第三方包用cdn地址引入到index.html中保证运行？

了解 CDN 

CDN全称叫做“Content Delivery Network”，中文叫内容分发网络。我们用它来提高访问速度。

把一些静态资源：css， .js，图片，视频放在第三方的CDN服务器上，可以加速访问速度。

前端项目中使用CDN好处：

1. 减少应用打包出来的包体积
2. 加快静态资源的访问-cdn服务器集群-就近返回
3. 利用浏览器缓存，不会变动的文件长期缓存

引用 CDN 

做相关配置：把排除在外的包，通过公共网络资源方式引入

注意：更改和添加代码一定要在开发环境下！！

<!--在public/index.html下：-->
 <script src="https://unpkg.com/echarts@5.3.2/dist/echarts.min.js"></script>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
    <script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.5/dayjs.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.15.9/lib/index.js"></script>
    <script src="https://unpkg.com/quill@1.3.7/dist/quill.js"></script>
    <script src="https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
    <script src="https://unpkg.com/vuex-persistedstate@3.2.1/dist/vuex-persistedstate.umd.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.9/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.core.css">
    <link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.snow.css">
    <link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.bubble.css">

问题：我们虽然排除调了第三方的包

打包dist和开发环境都会使用这套配置（cdn地址），并排除掉第三方

生产环境，打包时会以public/index.html,也有那些第三方的cdn地址，所以也能正常运行

但是第一次运行开发环境的速度会有点慢，所以开发环境下想要webpack引入本地的node_modules那些第三方包

解决：

process.env.NODE_ENV 可以根据敲击的命令不同，值也不同，能够一个代码区分不同环境

问题：在public/index.html中有时需要引入cdn地址（生产环境），有时不需要引入cdn地址（开发环境），如何实现自动化的添加与删除cdn地址？

解决：

第一步：配置cdn链接

第二步：注入cdn变量（打包时会执行）

第三步：在index.html利用模板引擎引入js和css

// 需要排除的包，对象
let externals = {}
// 需要配置的cdn链接
let CDN = { css: [], js: [] }
// 判断是否是生产环境
const isProduction = process.env.NODE_ENV === 'production'
// 如果是生产环境，需要执行以下逻辑
if (isProduction) {
  externals = {
    /**
     * externals对象属性分析：
     * '包名'：'在项目中引入的名字'**/
    axios: 'axios',
    dayjs: 'dayjs',
    echarts: 'echarts',
    'element-ui': 'ELEMENT',
    vue: 'Vue',
    'vue-quill-editor': 'VueQuillEditor',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    'vuex-persistedstate': 'createPersistedState'
  }
  CDN = {
    css: [
      'https://unpkg.com/element-ui@2.15.9/lib/theme-chalk/index.css',
      'https://unpkg.com/quill@1.3.7/dist/quill.core.css',
      'https://unpkg.com/quill@1.3.7/dist/quill.snow.css',
      'https://unpkg.com/quill@1.3.7/dist/quill.bubble.css'
    ],
    js: [
      'https://unpkg.com/echarts@5.3.2/dist/echarts.min.js',
      'https://unpkg.com/vue@2.6.14/dist/vue.js',
      'https://unpkg.com/vue-router@3.5.1/dist/vue-router.js',
      'https://unpkg.com/vuex@3.6.2/dist/vuex.js',
      'https://unpkg.com/axios@0.27.2/dist/axios.min.js',
      'https://unpkg.com/dayjs@1.11.5/dayjs.min.js',
      'https://unpkg.com/element-ui@2.15.9/lib/index.js',
      'https://unpkg.com/quill@1.3.7/dist/quill.js',
      'https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js',
      'https://unpkg.com/vuex-persistedstate@3.2.1/dist/vuex-persistedstate.umd.js'
    ]
  }
}
module.exports = defineConfig({
  configureWebpack: {
    // 打包瘦身
    // 当为开发环境时，externals为空对象
    // 当为生产环境时，externals对象值为排除第三方包，达到瘦身目的
    externals: externals
  },
  chainWebpack(config) {
    // 注入cdn变量（打包时会执行）
    config.plugin('html').tap(args => {
      // 参数对象添加属性叫cdn，值就是上面CDN对象
      args[0].cdn = CDN// 配置CDN给插件
      return args
    })
  }

})

<!-- 模板引擎的语法：ejs，artTemplate
    可以直接在html文件的标签里，注入js代码
  后来有了vue，vue也有自己的模板语法（指令，插值表达式）
模板都会被代码翻译成原生的标签，让浏览器识别 -->

<!-- 导入样式 -->
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
  <link rel="stylesheet" href="<%=css%>">
<% } %>

<!-- 导入js -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
<% } %>

总结：

dist瘦身：影响dist的体积，其他第三方包用cdn地址引入到index.html中保证运行

情况1：开发环境

（1）：externals无值（不排除第三方包）

（2）：index.html里面不引入cdn地址

情况2：生产环境

（1）：externals有值（排除第三方包）

（2）：index.html引入cdn地址