CDN способ оптимизировать проблему медленной загрузки домашней страницы проекта vue

Представьте основной код пакета плагина index.html, исключенного из htmlWebpackPlugin посредством CDN
:

  <% if (process.env.NODE_ENV === 'production') {
    
     %>
    <% if (htmlWebpackPlugin.options.cdn.css) {
    
     %>
      <% for(var css of htmlWebpackPlugin.options.cdn.css) {
    
     %>
        <link href="<%=css%>" rel="preload" as="style">
        <link rel="stylesheet" href="<%=css%>" as="style">
      <% } %>
    <% } %>
    <% if (htmlWebpackPlugin.options.cdn.js) {
    
     %>
      <% for(var js of htmlWebpackPlugin.options.cdn.js) {
    
     %>
        <link href="<%=js%>" rel="preload" as="script">
        <script src="<%=js%>"></script>
      <% } %>
    <% } %>
  <% } %>

Основной код vue.config.js:

// #region 忽略生成环境打包的文件
var externals = {
    
    
    'vue': 'Vue',
    'axios': 'axios',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
    'vant': 'Vant',
    'moment': 'moment',
}

// 在html文件中引入相关CDN
const cdn = {
    
    
  css: [
    // vant
    'https://cdn.bootcdn.net/ajax/libs/vant/3.0.13/index.min.css',
  ],
  js: [
      // vue
      'https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.global.js',
      // vue-router
      'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.global.min.js',
      // vuex
      'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.0/vuex.global.min.js',
      // axios
      'https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js',
      // vant
      'https://cdn.bootcdn.net/ajax/libs/vant/3.0.13/vant.min.js',
      // moment
      'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js',
  ]
}

// 忽略生成环境打包的文件
if (process.env.NODE_ENV === 'production') {
    
    
  config.plugin('html')
  .tap(args => {
    
    
      args[0].cdn = cdn
      return args
  })
  config.externals(externals)
}

// Просмотр размера файла пакета
// config
// .plugin('webpack-bundle-analyzer')
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)