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'), },
