cdn方式优化vue项目首页加载慢问题

以cdn方式引入htmlWebpackPlugin中排除的插件包
index.html 核心代码：

  <% 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)