Vue项目优化——使用CDN减小代码体积加快请求速度

最新推荐文章于 2025-07-04 16:00:20 发布

原创

最新推荐文章于 2025-07-04 16:00:20 发布 · 4.8k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #优化 #CDN

1. 为什么使用CDN

使用CDN主要解决两个问题：

打包时间太长、打包后代码体积太大，请求慢
服务器网络不稳带宽不高，使用cdn可以回避服务器带宽问题

2. 具体步骤

在/index.html中引入CDN

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>vue-project</title>
   </head>
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
     <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
     <!--生产环境-->
     <!--<script src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>-->
     <!-- 引入组件库 -->
     <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
     <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>