欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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