Vue项目CDN优化

Rnine9

已于 2022-08-22 11:20:32 修改

阅读量1.4k

点赞数 1

分类专栏： Vue 文章标签： vue.js

于 2020-08-04 15:48:20 首次发布

本文链接：https://blog.csdn.net/weixin_47768980/article/details/107787845

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

当我们项目完成后，build后发现文件会比较大，部署到服务器上首页加载还比较慢，这都是打包资源太多的问题，照成文件比较大，加载比较慢，这个时候我们就可以使用CDN资源优化项目了

build后会打印出日志，会发现这个js文件很大，我当时的是1.6m。

废话不多说，优化如下

1.在vue.config.js 添加如下配置

// chainWebpack: config => {
  //   //发布模式
  //   config.when(process.env.NODE_ENV === 'production', config => {
  //     //entry找到默认的打包入口，调用clear则是删除默认的打包入口,add添加新的打包入口
  //     config.entry('app').clear().add('./src/main-prod.js')
  //     config.set('externals', {
  //       // vue: 'Vue',
  //       axios: 'axios',
  //       'vue-router': 'VueRouter',
  //       // 'element-ui': 'ELEMENT',
  //       'echarts': 'echarts',
  //     })
  //   })
  //   //开发模式
  //   config.when(process.env.NODE_ENV === 'development', config => {
  //     config.entry('app').clear().add('./src/main-dev.js')
  //   })
  // },
  configureWebpack: {
    externals: {
      'vue': 'Vue',  //前面是我们引入的名字，后面是包名
      'axios': 'axios',
      'element-ui': 'ELEMENT',
      'echarts': 'echarts',
    }
  }

我当时是配置了开发模式和发布模式，使用cdn资源是想放在发布后，后来还是删了！！

2.在public目录下的index.html中引入CDN资源

<head>
      <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">

</head>

<body>
//注意： script不要放在head里面，引入的顺序根据依赖，别把vue放在依赖他的下面这样也会报错的
      <script src="//cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
       <script src="//cdn.bootcss.com/element-ui/2.13.2/index.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
</body>

CDN资源：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

需要就去上面找