VUE项目加载速度慢，加载资源量大，带宽占用多，静态资源请求优化

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