(现在其实处于不知道自己不知道状态，前端其实很多东东，不信弄个微博试试，还有那些概念的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中

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 首页问题的更多相关文章

  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. Qt之QComboBox定制

    说起下拉框,想必大家都比较熟悉,在我们注册一些网站的时候,会出现大量的地区数据供我们选择,这个时候出现的就是下拉框列表,再比如字体选择的时候也是使用的下拉框,如图1所示.下拉框到处可见,作为一个图形库 ...

  2. qt集成dsoframer.ocx打开office办公软件

    最近一段时间真是事情太多了,前不久项目中一个嵌入office软件的问题,由于没有时间研究,且项目的需求是浏览word文档,偷了一个懒,把word文档转换成pdf文档,然后嵌入libcef浏览器给打开了 ...

  3. .net core在Ocelot网关中统一配置Swagger

    最近在做微服务的时候,由于我们是采用前后端分离来开发的,提供给前端的直接是Swagger,如果Swagger分布在各个API中,前端查看Swagger的时候非常不便,因此,我们试着将Swagger集中 ...

  4. RabbitMQ学习笔记（四） Routing

    新的场景 在我们学习了RabbitMQ的发布与订阅之后,我们很容易就可以完成一个简单的消息群发器. 使用这个消息群发器,所有的消费者程序实例都会接收到相同的消息信息,从而实现广播的效果. 但是这种广播 ...

  5. 获取Android设备唯一标识码

    概述 有时需要对用户设备进行标识,所以希望能够得到一个稳定可靠并且唯一的识别码.虽然Android系统中提供了这样设备识别码,但是由于Android系统版本.厂商定制系统中的Bug等限制,稳定性和唯一 ...

  6. 用Javascript方式实现LeetCode中的算法（更新中）

    前一段时间抽空去参加面试,面试官一开始让我做一道题,他看完之后,让我回答一下这个题的时间复杂度并优化一下,当时的我虽然明白什么是时间复杂度,但不知道是怎么计算的,一开局出师不利,然后没然后了,有一次我 ...

  7. Django学习笔记（9）—— 开发用户注册与登录系统

    一,项目题目: 开发用户注册与登录系统 该项目主要练习使用Django开发一个用户注册与登录的系统,通过这个项目然后巩固自己这段时间所学习的Django知识. 二,项目需求: 开发一个简单的用户登录与 ...

  8. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  9. 我从来不理解JavaScript闭包，直到有人这样向我解释它...

    摘要: 理解JS闭包. 原文:我从来不理解JavaScript闭包,直到有人这样向我解释它... 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正如标题所述,JavaScript闭包 ...

  10. Dynamics 365中配置和使用文件夹级别的跟踪(folder-level tracking)

    本人微信和易信公众号:微软动态CRM专家罗勇 ,回复274或者20180630可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me ...