vue项目cdn加速秒加载和项目优化

项目中的问题

1. 当我们在维护自己的博客或者自己的网站的时候没有特别好的服务器就会响应特别的慢

2. 当我们项目特别大的时候也会首屏加载特别慢而且 vue项目打包后的js文件特别的庞大 还要加载各种资源就会特别的卡顿

3.当我们项目中用到了一些3D效果各种3D资源部特别的大的时候根本加载不出来

解决方案 

使用cdn加速 这里演示的是vue3的CLI构建的项目

1. 第一步先在index.html 使用 script标签 这里的代码都是从bootcdn找的当然国内也有特别多而且好的 cdn加速网站 大家自己看需求

复制代码
    <title>小赵后台</title>
    <!-- import element  CSS -->
    <link
      href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.28/index.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- vue 引入cdn -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.45/vue.global.min.js"></script>
    <!-- 引入 cdn axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>
    <!-- vue-router 引入cdn-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.6/vue-router.global.min.js"></script>
    <!-- 引入element ui  -->
    <!-- Import component library -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.28/index.full.min.js"></script>
复制代码

2. 在vue.config.js中（没有就创建一个）配置 cdn加速就可以了 在开发环境下建议还是下一个生产环境的包不然webpack 不认 （eg: npm install axios -D）

复制代码
const { defineConfig } = require('@vue/cli-service')
const objExternals = {
  // CDN 的 资源（和vue相关的） 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
  'vue': 'Vue',
  // 属性名称 Vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的，
  // 不去 node_modules 中找，而是去找 全局变量 Vue
  'vue-router': 'VueRouter',
  'axios': 'axios',
  'element-plus': 'ElementPlus',
}

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  configureWebpack: {
  //判断在生产环境就使用cdn, 看个人项目情况
  // 这句话是否判断处于生产环境 如果是生产环境的就使用cdn加速
    // externals: process.env.VUE_APP_STAGE === 'LOCAL' ? {} : objExternals
    externals: objExternals 
  },
})
复制代码

注意：cdn加速网站一定要找靠谱的不然它关了你项目就 挂了

项目加速还有如果使用nginx服务器可以把项目压缩打包发放资源 （这个网上特别多如果后期有时间就会专门写一下）

项目加速还有webpack打包的时候要用懒加载组件 比如下面这个样子的引入方式 （那个/*webpackChunkName: "login" */ 可以分包）

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    meta: { title: '登录页' },
    name: 'login',
    component: () =>
      import(/* webpackChunkName: "login" */ '@/views/Login.vue'),
  },

当然还是有个好的服务器是最好的了 但是我亲测这一套下来 我最垃圾的服务器也会快特别多  祝大家新年快乐 

posted @   乔木滴滴  阅读(1422)  评论(0)  编辑  收藏  举报
相关博文：
· vue项目优化
· 小项目中vuex使用频率不太多我们完全可以用provide inject 来代替可以让项目小不少
· vue3+vite项目优化静态资源使用云存储
· vue载入速度优化（打包放服务器后加载很慢）--亲测可行
· Vue 项目的性能优化
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示