vue首屏加载过慢问题处理

最新推荐文章于 2024-04-01 14:04:37 发布

浊清。。。

最新推荐文章于 2024-04-01 14:04:37 发布

阅读量442

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_28353055/article/details/103585799

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.路由懒加载

{  
    path: '/home',
    name: 'home',   
    component: () => import('@/view/files/index.vue')
 }

2.cdn代替npm本地引入，这边用： bootcdn
在index中引入

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src='https://cdn.bootcss.com/vue/2.5.21/vue.min.js'></script>
    <script src='https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js'></script>
    <script src='https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js'></script>
    <script src='https://cdn.bootcss.com/axios/0.18.0/axios.min.js'></script>
    <script src='https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts.simple.min.js'></script>
    <script src='https://cdn.bootcss.com/axios/0.18.1/axios.min.js'></script>
    <script src='https://cdn.bootcss.com/iview/3.5.0-rc.1/iview.min.js'></script>
  </body>

在vue.config配置

configureWebpack: {
     externals: {
       'echarts': 'echarts',
       'vue': 'Vue',
       'vuex': 'Vuex',
       'vue-router': 'VueRouter',
       'iview': 'iview',
       'axios': 'axios'
     }
   }
}

3.配置gzip，不过这个需要nginx支持
安装

npm install compression-webpack-plugin -D

配置

// 上面提到的cdn配置
const externals = {
   'echarts': 'echarts',
   'vue': 'Vue',
   'vuex': 'Vuex',
   'vue-router': 'VueRouter',
   'iview': 'iview',
   'axios': 'axios'
 }
 module.exports = {
	configureWebpack:config => {
	    if (process.env.NODE_ENV === 'production') {
	        return {
	          plugins: [
	            new CompressionPlugin({
	              test: /\.js$|\.html$|\.css/,
	              threshold: 10240,
	              deleteOriginalAssets: true
	            })
	          ],
	          ...externals
	        }
	   } else {
	      return {...externals}
       }
  }
}