VUE项目加载速度慢,加载资源量大,带宽占用多,静态资源请求优化
程序员文章站
2022-07-10 18:20:57
VUE项目加载速度慢,加载资源量大,带宽占用多,解决方案基于提高用户的访问体验,节约项目的运营成本,毕竟多1KB,1000人的并发带宽就要多占用1M,废话不多说,直接上正事。1.router采用懒加载,这个应该都有的,vue-cli的时候,配置的router里面就有懒加载,就是访问哪个页面组件,就加载哪个页面的静态资源。但是这里面也有一个可以优化的点。vue-cli生成的项目,你访问首页的时候会发现,居然加载了其他页面的JS。优化的点就在这里,可以取消webpack的预加载。module.export...
VUE项目加载速度慢,加载资源量大,带宽占用多,解决方案
基于提高用户的访问体验,节约项目的运营成本,毕竟多1KB,1000人的并发带宽就要多占用1M,废话不多说,直接上正事。
1.router采用懒加载,这个应该都有的,vue-cli的时候,配置的router里面就有懒加载,就是访问哪个页面组件,就加载哪个页面的静态资源。但是这里面也有一个可以优化的点。vue-cli生成的项目,你访问首页的时候会发现,居然加载了其他页面的JS。优化的点就在这里,可以取消webpack的预加载。
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
},
};
当然,这个只是减少首页的请求压力,需不需要使用就仁者见仁智者见智了。
router的懒加载就是必须的了。还是写出来。webpackChunkName是切割出来的js的名称。
const routes = [{
path: "/",
name: "Login",
// component: Home
//懒加载
component: () =>
import ( /* webpackChunkName: "login" */ "@/components/pages/Login.vue")
},]
2.最重要的一步
package.json里面引入的第三方包,直接用CDN的引入方式,不要直接用三方包去做,这样会消耗大量的带宽。包括vue和vue-router,vuex等。
不用remove 插件,也不用修改package.json,在vue.config.js里面配置忽略打包就行。
module.exports = {
configureWebpack: {
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'mint-ui': 'MintUI',
'echarts': 'echarts',
}
}
}
然后在index.html里面引入CDN文件即可。
<!-- 引入Vue.js -->
<script crossorigin="anonymous" integrity="sha512-BKbSR+cfyxLdMAsE0naLReFSLg8/pjbgfxHh/k/kUC82Hy7r6HtR5hLhobaln2gcTvzkyyehrdREdjpsQwy2Jw==" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<!-- 引入vuex.js -->
<script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>
<!-- 引入mint-ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入mint-ui组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<!-- 引入eacharts组件库 -->
<script crossorigin="anonymous" integrity="sha384-DX1FVVXdGcNR016Jj6c5WuxYmyUvkb2/0ZMXKwbXaXs8j9tPs3e4RUjNg4tViEj4" src="https://lib.baomitu.com/echarts/4.7.0/echarts-en.common.js"></script>
这样做,你就会发现,首页的带宽占用会减少2/3了。
当然,这都是我自己的项目,自己这样优化的,有更好的方案或者有不正确的地方,欢迎同僚指出。
本文地址:https://blog.csdn.net/qq519133962/article/details/109647377