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/element-ui@2.0.3/lib/theme-chalk/index.css">
</head>
<body> <!-- 引入组件<script src="https://unpkg.com/vue@2.4.2/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/element-ui@2.0.3/lib/index.js <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>--> <script src="https://unpkg.com/element-ui@2.0.3/lib/index.js"></script> <script src="https://unpkg.com/axios@0.17.1/dist/axios.min.js"></script>
(2)
在webpack.base.conf.js中
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
},
(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 首页问题的更多相关文章
- 从Nodejs脚本到vue首页看开源始末的DemoHouse
最近上Github看见了大漠的DemoHouse项目,看到Issues说准备做一个首页,于是我的第一想法就是做一个md列表页面,md文件可以很容易的生成一个html文件.刚刚做好脚本文件,可以生成li ...
- vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...
- vue 首页导航+左侧菜单
1. Mock.js 前后端分离开发开发过程当中,经常会遇到以下几个尴尬的场景: 1. 老大,接口文档还没输出,我的好多活干不下去啊! 2. 后端小哥,接口写好了没,我要测试啊! 前后端分离之后,前端 ...
- Vue首页加载过慢 解决方案
一.什么导致了首页初步加载过慢:app.js文件体积过大 二.解决方法: 1.Vue-router懒加载 vue-router懒加载可以解决首次加载资源过多导致的速度缓慢问题:vue-router支持 ...
- 原来写个Vue 首页就这么简单
全栈的自我修养: 为我们的项目添加首页 You can never replace anyone. What is lost is lost. 每个人都是无可替代的,失去了便是失去了. 前言 上篇文章 ...
- vue首页组件切换
结构如下 代码如下: <template> <div id="page"> <div style="width: 100%" cl ...
- vue项目开发基本目录结构
§ 目录结构 . ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── src/ # 源码目录(开发都在这里进行) │ ├── ass ...
- vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...
随机推荐
- C++版 - 剑指offer面试题38:数字在已排序数组中出现的次数
数字在已排序数组中出现的次数 提交网址: http://www.nowcoder.com/practice/70610bf967994b22bb1c26f9ae901fa2?tpId=13&t ...
- mybatis中的缓存问题
关于mybatis基础我们前面几篇博客已经介绍了很多了,今天我们来说一个简单的问题,那就是mybatis中的缓存问题.mybatis本身对缓存提供了支持,但是如果我们没有进行任何配置,那么默认情况下系 ...
- PE知识复习之PE的节表
PE知识复习之PE的节表 一丶节表信息,PE两种状态.以及重要两个成员解析. 确定节表位置: DOS + NT头下面就是节表. 确定节表数量: 节表数量在文件头中存放着.可以准确知道节表有多少个. 节 ...
- JavaScript与WebAssembly进行比较
本文由云+社区发表 作者:QQ音乐前端团队 在识别和描述核心元素的过程中,我们分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助 ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- FastDfs集群docker化部署
初识分布式文件系统FastDFS- 1.分布式与集群的区别 区别:集群是个物理形态,分布式是个工作方式.只要是一堆机器,就可以叫集群,他们是不是一起协作着干活,这个谁也不知道:一个程序或系统,只要运行 ...
- MyEclipse自动补全
打开MyEclipse 6.5,然后"window"→"Preferences". 选择"java",展开,"Editor&quo ...
- 注意,更改团队所属业务部门用Update消息无效!
摘要: 本人微信公众号:微软动态CRM专家罗勇 ,回复297或者20190112可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me ...
- ubuntu16.04 部署配置LVS主从
实验环境---ubuntu16.04 四台机器:10.211.55.13—55.16 具体实验环境配置如下: 10.211.55.102 LVS_VIP 10.211.55.13 LVS_MAST ...
- iOS---------- Safe Area Layout Guide before iOS 9.0
如果你们的项目不做iOS9以下支持就打开main.storyboard 去除Use safe Area Layout 如果不考虑iOS9以下支持就按照下面的步骤 选中控制器,右边面板的Build ...