vue 首页问题

Posted cnchengv

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 首页问题相关的知识,希望对你有一定的参考价值。

(现在其实处于不知道自己不知道状态,前端其实很多东东,不信弄个微博试试,还有那些概念的to thi tha)

 

1、压缩

一般 vue-cli已经压缩了

比如js 的,一般4M多压缩到 1M,还有css的,和gzip的都包含了

    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

2、用cdn的

  参考 https://blog.csdn.net/jiaojiao51290/article/details/81381668

  (1、)index.html中,添加CDN资源

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css"> 
 </head>
  <body>
  
    <!-- 引入组件<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>库 -->
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
     <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
     <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    
    <!-- https://unpkg.com/[email protected]/lib/index.js <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>-->
 
   <script src="https://unpkg.com/[email protected]/lib/index.js"></script> 
   
   <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>

 

 

(2)

在webpack.base.conf.js中

module.exports 中添加
 externals: {
  ‘vue‘: ‘Vue‘,
  ‘vuex‘: ‘Vuex‘,
  ‘vue-router‘: ‘VueRouter‘,
  ‘element-ui‘: ‘ELEMENT‘,
    ‘axios‘:‘axios‘

},

(3)main.js中

去掉import,如:

  1.  
    // import Vue from ‘vue‘
  2.  
    // import Router from ‘vue-router‘

去掉Vue.use(XXX),如:

// Vue.use(Router)

实际
/*
import ELEMENT from ‘element-ui‘

import ‘element-ui/lib/theme-chalk/index.css‘
import ‘element-ui/lib/theme-chalk/display.css‘;

import vuex from ‘vuex‘
import axios from ‘axios‘

import AMap from ‘vue-amap‘
*/

/*
Vue.use(ELEMENT)
Vue.use(vuex);

Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
    // 申请的高德key
    key: ‘6118ca43cedb54862985e310c05312e9‘,
    // 插件集合
    plugin: [‘AMap.Scale,AMap.DistrictSearch,AMap.MarkerClusterer‘]
});
*/

 


简单一优化,总共只有400k了,从cdn加载不到200k,一般的网站可以接受了吧

 https://segmentfault.com/a/1190000010042512--这个很好好好学习,自愧不如,回去beisong

3、 然后

vue-cli按需加载,懒加载组件

4、服务器端加载,目前这样还没必要吧

 








以上是关于vue 首页问题的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家