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，如：
-
// import Vue from ‘vue‘
-
// 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 首页问题的主要内容，如果未能解决你的问题，请参考以下文章