前言~~~

搭建vue项目时,如果使用了多插件的情况在打包的时候会全部加载进来,打成的包会很大,导致在加载程序的时候速度上会有一些影响,这时候就是用到了cdn这个东东

1、查找cdn的时候我用的是(360的奇舞团CDN)、(今日头条CDN)

                360奇舞团地址:静态资源托管库

                今日头条地址:字节跳动静态资源公共库

 2、这里将以vue-echart举例,我们一般引用echart的时候都是直接引用,这时就像上所述在打包时出现资源较大的情况,所以使用了cdn,vue对于echart之类的插件都有很好的集成,这里可以使用(vue-资源)去cdn中进行查找

3、配置我们需要的cdn 引入js、css等这里 process.env.NODE_ENV === 'production' 对环境进行一个校验,默认是生产环境使用了cdn

注意:

1)、这里有几个注意的地方 vueEcharts 名字不是随意取的,在自己的cdn中查找一下如下:

 2)、config里面各项配置说明见文章:config说明

上面描述完了,接下来就是加载cdn的过程 说一下个人的理解,系统启动时候会自动加载config.js,在预编译的时候把组件给加载进来,进行打包到html模板中,在public的index中配置对应的cdn去加载相当于一个生成文件的入口,打包的时候会将css和js放到这里面,之后在输出到目录里面

vue.config.js中配置的

module.exports = {
  devServer: {
    port: 12000,
    proxy: {
      '/manage': {
        target: 'http://localhost:24030',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/manage': '/',
        },
      },
    },
  },
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      var externals = {
        vue: 'Vue',
        vuex: 'Vuex',
        echarts: 'echarts',
        'element-ui': 'ELEMENT',
        'vue-router': 'VueRouter',
        'vue-echarts': 'VueECharts',
      }
      config.externals(externals)

      const cdn75 = {
        // 360的奇舞团CDN
        css: [
          // element-ui.css
          'https://lib.baomitu.com/element-ui/2.14.1/theme-chalk/index.min.css',
        ],
        js: [
          // vue-echarts.js
          'https://lib.baomitu.com/vue-echarts/6.0.2/index.umd.min.js',
        ],
      }

      const cdnToutiao = {
        // 今日头条CDN
        css: [
          // element-ui.css
          'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/element-ui/2.14.1/theme-chalk/index.min.css',
        ],
        js: [
          // vue-echarts.js
          'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue-echarts/6.0.2/index.umd.min.js',
        ],
      }

      const jsDelivr = {
        // 今日头条CDN
        css: [
          // element-ui.css
          'https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/theme-chalk/index.css',
        ],
        js: [
          // vue-echarts.js
          'https://cdn.jsdelivr.net/npm/vue-echarts@6.0.2/dist/index.umd.min.js',
        ],
      }

      config.plugin('html').tap((args) => {
        args[0].cdn75 = cdn75
        args[0].cdnToutiao = cdnToutiao
        args[0].jsDelivr = jsDelivr
        return args
      })
    }
  },
}

.public/index.html(重点不是全部复制哈,这里是引入了对应的样式和js,有校验的前提)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="program" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <!-- 引入样式 -->
    <% if (process.env.NODE_ENV === 'production') { %>
      <% for(var css of htmlWebpackPlugin.options.cdn75.css) { %>
        <link rel="stylesheet" href="<%=css%>" as="style">
      <% } %>
    <% } %>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

    <!-- 引入JS -->
    <% if (process.env.NODE_ENV === 'production') { %>
      <% for(var js of htmlWebpackPlugin.options.cdn75.js) { %>
        <script src="<%=js%>"></script>
      <% } %>
    <% } %>

    <div id="app">
      <div>正在加载系统资源,请耐心等待</div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

Logo

前往低代码交流专区

更多推荐