vue项目性能优化2，优化：使用CDN加速

最新推荐文章于 2023-12-12 19:15:07 发布

原创最新推荐文章于 2023-12-12 19:15:07 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

82 篇文章

订阅专栏

本文介绍如何通过使用CDN加速和优化webpack配置来减少项目加载时间，具体包括使用外部资源、设置备用CDN及调整webpack配置以降低vendor.js文件大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于webpack 3、vue 2和vue-cli 2的性能优化。

使用CDN加速，降低服务器带宽的压力。

externals的作用：
让在项目中通过import引入的依赖，在打包的时候，不会打包到vendor.js中，而是通过script的方式去访问这些依赖。

免费的CDN服务器：
https://www.bootcdn.cn/
https://cdnjs.com/
https://www.jsdelivr.com/

打开index.html文件，修改：
html2canvas 1.0.0-rc.5版本，只有一个CDN服务器，没有备份CDN，很可怕。只能降低版本，使用html2canvas 0.5.0-beta4版本。

<!--CDN加速，引用bootstrap的CDN资源-->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.10.0/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
<script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@0.5.0-beta4/dist/html2canvas.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/mobile-detect/1.4.4/mobile-detect.min.js"></script>
<!--这个没有备用CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue-video-player@5.0.2/dist/vue-video-player.js"></script>

<script src="https://res2.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script>
  //如果CDN加载失败，就加载备用的另一个CDN，防止页面打不开。
  window.Vue || document.write('<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js"><\/script>');
  window.VueRouter || document.write('<script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"><\/script>');
  window.Vuex || document.write('<script src="https://cdn.jsdelivr.net/npm/vuex@3.1.0/dist/vuex.min.js"><\/script>');
  window.ELEMENT || document.write('<script src="https://cdn.jsdelivr.net/npm/element-ui@2.10.0/lib/index.js"><\/script>');
  window.axios || document.write('<script src="https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"><\/script>');
  window.Qs || document.write('<script src="https://cdn.jsdelivr.net/npm/qs@6.5.2/dist/qs.js"><\/script>');
  window.MINT || document.write('<script src="https://cdn.jsdelivr.net/npm/mint-ui@2.2.13/lib/index.js"><\/script>');
  window.moment || document.write('<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"><\/script>');
  //这个CDN很特别，链接是0.5.0-beta4版本，但是，打开却是0.5.0-beta3版本
  window.html2canvas || document.write('<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"><\/script>');
  window.Swiper || document.write('<script src="https://cdn.jsdelivr.net/npm/swiper@4.5.1/dist/js/swiper.min.js"><\/script>');
  window.MobileDetect || document.write('<script src="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.4/mobile-detect.min.js"><\/script>');
</script>

打开build/webpack.base.conf.js文件，修改：
注意：
key-value格式，右边的value不是乱写的。举例来说，打开CDN的URL链接，看源码，会发现exports.MINT，所以，配置就写MINT。
左边的key，对应的是import Vue from ‘vue’里面的’vue’，不是乱写的。而import后面的Vue，和右边的value，不需要相同，没有关系。
module.exports = {
context: path.resolve(__dirname, ‘…/’),
entry: {
app: [“babel-polyfill”, “./src/main.js”]
},
//以下模块不打包到vendor.js文件，使用index.html文件中引用的CDN模块
externals: {
‘vue’: ‘Vue’,
‘vue-router’: ‘VueRouter’,
‘vuex’: ‘Vuex’,
‘element-ui’: ‘ELEMENT’,
‘axios’: ‘axios’,
‘qs’: ‘Qs’,
‘mint-ui’: ‘MINT’,
‘moment’: ‘moment’,
‘html2canvas’: ‘html2canvas’,
‘vue-video-player’: ‘VueVideoPlayer’,
‘swiper’: ‘Swiper’,
‘mobile-detect’: ‘MobileDetect’
}
}

优化前：vendor.js文件的大小是1.6 MB
优化后：vendor.js文件的大小是229 KB
对比：减少了1.3MB

注意：
import不要删除，否则会报错。
import axios from ‘axios’
不需要修改为
const axios = require(‘axios’)
官网有详细说明，参考：https://webpack.docschina.org/configuration/externals/