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

1、压缩

一般 vue-cli已经压缩了

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

  1.     new UglifyJsPlugin({
  2.       uglifyOptions: {
  3.         compress: {
  4.           warnings: false
  5.         }
  6.       },
  7.       sourceMap: config.build.productionSourceMap,
  8.       parallel: true
  9.     }),

2、用cdn的

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

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

  1.  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.0.3/lib/theme-chalk/index.css">
  2.  </head>
  3.   <body>
  4.  
  5.     <!-- 引入组件<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>库 -->
  6.     <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
  7.      <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  8.      <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  9.  
  10.     <!-- 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>-->
  11.  
  12.    <script src="https://unpkg.com/element-ui@2.0.3/lib/index.js"></script> 
  13.  
  14.    <script src="https://unpkg.com/axios@0.17.1/dist/axios.min.js"></script>

(2)

在webpack.base.conf.js中

module.exports 中添加
  1.  externals: {
  2.   'vue': 'Vue',
  3.   'vuex': 'Vuex',
  4.   'vue-router': 'VueRouter',
  5.   'element-ui': 'ELEMENT',
    'axios':'axios'
  1.  
  2.  },

(3)main.js中

去掉import，如：

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

去掉Vue.use(XXX)，如：

  1. // Vue.use(Router)
  3. 实际
  1. /*
  2. import ELEMENT from 'element-ui'
  3.  
  4. import 'element-ui/lib/theme-chalk/index.css'
  5. import 'element-ui/lib/theme-chalk/display.css';
  6.  
  7. import vuex from 'vuex'
  8. import axios from 'axios'
  9.  
  10. import AMap from 'vue-amap'
  11. */
  12.  
  13. /*
  14. Vue.use(ELEMENT)
  15. Vue.use(vuex);
  16.  
  17. Vue.use(AMap);
  18. // 初始化vue-amap
  19. AMap.initAMapApiLoader({
  20.     // 申请的高德key
  21.     key: '6118ca43cedb54862985e310c05312e9',
  22.     // 插件集合
  23.     plugin: ['AMap.Scale,AMap.DistrictSearch,AMap.MarkerClusterer']
  24. });
  25. */

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

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

3、 然后

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

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

vue 首页问题的更多相关文章

  1. 从Nodejs脚本到vue首页看开源始末的DemoHouse

    最近上Github看见了大漠的DemoHouse项目,看到Issues说准备做一个首页,于是我的第一想法就是做一个md列表页面,md文件可以很容易的生成一个html文件.刚刚做好脚本文件,可以生成li ...

  2. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...

  3. vue 首页导航+左侧菜单

    1. Mock.js 前后端分离开发开发过程当中,经常会遇到以下几个尴尬的场景: 1. 老大,接口文档还没输出,我的好多活干不下去啊! 2. 后端小哥,接口写好了没,我要测试啊! 前后端分离之后,前端 ...

  4. Vue首页加载过慢 解决方案

    一.什么导致了首页初步加载过慢:app.js文件体积过大 二.解决方法: 1.Vue-router懒加载 vue-router懒加载可以解决首次加载资源过多导致的速度缓慢问题:vue-router支持 ...

  5. 原来写个Vue 首页就这么简单

    全栈的自我修养: 为我们的项目添加首页 You can never replace anyone. What is lost is lost. 每个人都是无可替代的,失去了便是失去了. 前言 上篇文章 ...

  6. vue首页组件切换

    结构如下 代码如下: <template> <div id="page"> <div style="width: 100%" cl ...

  7. vue项目开发基本目录结构

    § 目录结构 . ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── src/ # 源码目录(开发都在这里进行) │ ├── ass ...

  8. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  9. 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架

    本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...

随机推荐

  1. CentOS安装Java JDK

    JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.在Linux上安装Tomcat,而Tomcat服务器运行时是需要JDK支持的,所以服务器必须配置好JDK用到 ...

  2. intelliJ idea #region 代码折叠

    在intelliJ idea中不仅可以对类.方法等结构的代码进行折叠(ctrl+-)还可以自定义折叠代码.intelliJ支持两种风格的自定义代码折叠,如下: visual studio style ...

  3. 面试小知识：MySQL索引相关

    前言 本模板主要是一些面试相关的题目,对于每一道问题,我会提供简单的解答,答案的来源主要是基于自己看了各方资料之后的理解,如果有错的,欢迎指点出来. 1. 什么是最左前缀原则? 以下回答全部是基于My ...

  4. python基础4--控制流

    1.if语句 结构: if condition: do something elif other_condition: do something number = 60 guess = int(inp ...

  5. MySQL高可用复制管理工具 —— Orchestrator介绍

    背景 在MySQL高可用架构中,目前使用比较多的是Percona的PXC,Galera以及MySQL 5.7之后的MGR等,其他的还有的MHA,今天介绍另一个比较好用的MySQL高可用复制管理工具:O ...

  6. selinux基本概念

    TE模型 主体划分为若干组,称为域 客体划分为若干组,每个组称为一个类型   DDT(Domain Definition Table,域定义表,二维),表示域和类型的对应访问权限,权限包括读写执行 一 ...

  7. 内存管理-MRC与ARC详解

    Objective-C提供了两种内存管理机制MRC(Mannul Reference Counting)和ARC(Automatic Reference Counting),为Objective-C提 ...

  8. WPF 中图片的加载 ，使用统一资源标识符 (URI)

    在wpf中,设置图片路径有2种方法: 1.xaml文件中,指定路径 <Button Name=" HorizontalAlignment="Right" Verti ...

  9. Ubuntu 18.04 安装java8

    step1: 添加ppa sudo add-apt-repository ppa:webupd8team/java sudo apt-get update step2: 安装oracle-java-i ...

  10. CentOS7.3 yum install MySQL5.7

    安装环境:阿里云服务器 + CentOS7.3 测试工具:Navicat for MySQL 参考博客:https://blog.csdn.net/qq_38417808/article/detail ...