今天打算上线vue的单页面项目，上线后，首页加载速度巨慢！

原因是项目上线后，网速不够快，加载js，css等资源很慢，

打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大，达到了4千多kb，简直不能忍！（vendors的文件是项目中引入的第三方库，打包好的文件）

网上查了查，有很多优化方法，我从简单的开始吧

我选择的第一个优化方式是，给webpack开启gzip压缩，能够将文件体积减少60%。

下面来说一下开启gzip压缩的具体步骤

1：引入 compression webpack plugin 插件

npm i -D compression-webpack-plugin

在vue cli3.0 生成的项目里，可在 vue.config.js 中按照如下方式进行配置：

const path = require("path");

const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件

const webpack = require("webpack");

// vue.config.js

module.exports = {

  //基本路径(相对于服务器根目录   静态资源的相对路径)

  publicPath: process.env.NODE_ENV === "production" ? "/dist/" : "/", //font scss资源路径 不同环境切换控制

  productionSourceMap:false,//打包时不要map文件

  //输出文件目录

  outputDir: "dist",

  //是否在保存的时候检查

  lintOnSave: true,

  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

  assetsDir: 'statick',

  devServer: {

    // host: 'localhost',

    // host: "0.0.0.0",

    // https: false, // https:{type:Boolean}

    // open: true, //配置自动启动浏览器  http://172.16.1.12:7071/rest/mcdPhoneBar/

    // hotOnly: true, // 热更新

    port: 8090

    // proxy:{

    //   '/': {

    //     target: 'http://192.168.0.125:3000/',

    //     changeOrigin: true,

    //     pathRewrite: {}

    //   },

  },

  configureWebpack: {//引入jquery

    plugins: [

      new webpack.ProvidePlugin({

        $:"jquery",

        jQuery:"jquery",

        "windows.jQuery":"jquery"

      }),

      new CompressionPlugin({//gzip压缩配置

        test:/\.js$|\.html$|\.css/,//匹配文件名

        threshold:10240,//对超过10kb的数据进行压缩

        deleteOriginalAssets:false,//是否删除原文件

      })

    ]

  },

};

一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip

要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。over

下面开启第二种优化方式（路由懒加载）

有三种方式，我采用import的方式

router.js中

import Vue from "vue";

import Router from "vue-router";

Vue.use(Router);

export default new Router({

  mode: "history",

  base: process.env.BASE_URL,

  routes: [

    {

      path: "/",

      name: "index",

      component: () =>

        import(/* webpackChunkName: "index" */ "./pages/index.vue"),

        children:[

          {

            path:'/',

            name:'com1',

            component:()=>

              import(/* webpackChunkName: "com1" */ './components/com1.vue'),//像这样的 前面的注释内容是有用的，可以指定chunk的名字

          },

          {

            path:'com2',

            name:'com2',

            component:()=>

              import(/* webpackChunkName: "com2" */ './components/com2.vue')

          },

        ]

    }

  ]

});

cdn网址https://www.bootcdn.cn/

下面开启CDN加速（vue,vue-router,vueX,axios,jquery，bootstrap,element-ui）

在index.html中的body中引入jquery，和bootstarp，并将main.js中import引入的bootstrap的js和css都注释掉

详细实例加代码    （请点这）

我的项目里还用了adminlte的库所以我把这个库也用cdn加速了，把index.html的代码帖出来， main.js中之前import引入的几乎都注释完了，就不帖了

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css">

    <link href="https://cdn.bootcss.com/admin-lte/2.4.10/css/skins/_all-skins.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/admin-lte/2.4.10/css/AdminLTE.min.css" rel="stylesheet">

    <title>adminlteandvue</title>

  </head>

  <body>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.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.3/vue-router.min.js"></script>

    <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>

    <script src="https://cdn.bootcss.com/admin-lte/2.4.10/js/adminlte.min.js"></script>

    <noscript>

      <strong>We're sorry but adminlteandvue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

    </noscript>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

！！！

示例：

通常我们需要优化加载速度的时候，在众多的优化当中，可以使用link代替import，避免过多的import让加载变慢。那在vue里面应该怎么优化尼。国内的CDN服务推荐使用 BootCDN，国外还是不要用了.......
运用了webpack4的话是默认有分包的功能的，如果之前下载了那些插件，必须要先把它卸载了
首先在index.html里面把所需要的资源先写出来，如：

<head>

  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css">

</head>

<body>

  <div id="app"></div>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>

  <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>

  <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>

  <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>

  <!-- built files will be auto injected -->

</body>

在vue.config.js里面加上

module.exports = {

 ···

···

  configureWebpack: {

    resolve: {

      extensions: ['.js', '.json', '.vue', '.scss', '.css'],

      alias: {

       ···

      },

    },

    externals: {

      'vue': 'Vue',

      'vuex': 'Vuex',

      'vue-router': 'VueRouter',

      'element-ui': 'ELEMENT',

      'Axios':'axios'

    }

  },

然后修改src/router/index.js

// 注释掉

// import Vue from 'vue'

import VueRouter from 'vue-router'

// 注释掉

// Vue.use(Router)

...

修改 src/store/index.js

...

// 注释掉

// Vue.use(Vuex)

...

最后修改 src/main.js

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './store'

import ELEMENT from 'element-ui'

Vue.use(ELEMENT)

import axios from 'Axios'

Vue.prototype.$axios= axios

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router: router,

  store: store,

  render: h => h(App)

})

注意，这里 element-ui 变量名要使用 ELEMENT，因为element-ui的 umd 模块名是 ELEMENT

进一步优化首页加载，可以考虑延迟加载，首屏不需要展示的不急加载：

参考webpack官网：https://webpack.js.org/guides/lazy-loading/#root

。

vue-cli3项目首页加载速度优化（cdn加速，路由懒加载，gzip压缩）的更多相关文章

  1. vue3 + vite实现异步组件和路由懒加载

    在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异步组件和路由懒加载的实现 ...

  2. 记一次cocos项目的加载速度优化

    半个月前,我们用cosos creator做了一个简单的小游戏,也许算不上小游戏吧..一边学cocos,一边做,几经波折后终于上线了.然鹅,功能是实现了,但是加载速度十分感人(毕竟没经验嘛,无辜脸). ...

  3. vue项目性能优化（路由懒加载、gzip加速、cdn加速）

    前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...

  4. vue-router路由懒加载（解决vue项目首次加载慢）

    懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...

  5. vue cli3 项目优化

    vue-cli3 Prefetch (官网内容) <link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空 ...

  6. vue+element ui项目总结点（一）select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  7. vue-cli 项目实现路由懒加载

    在vue 单页应用中,如果路由不实现懒加载,那么打包出来的文件将会非常大,加载也会非常慢.vue-router 官网也有相应的介绍,但是具体怎么去实现还是讲的比较模糊的,下面将一步步讲解配置路由懒加载 ...

  8. 【巷子】---vue路由懒加载---【vue】

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  9. 【前端优化】js图片懒加载及优化

    一.前言 为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...

随机推荐

  1. pt-online-schema-change使用

    MySQL ddl 的问题现状 在 运维mysql数据库时,我们总会对数据表进行ddl 变更,修改添加字段或者索引,对于mysql 而已,ddl 显然是一个令所有MySQL dba 诟病的一个功能,因 ...

  2. 怎样在页面关闭时发起HTTP请求

    比如有需求是要让页面关闭时, 在数据库中记录用户的一些数据或log日志. 这时就需要在用户关闭页面时发起HTTP请求. 做法是对window.onunload设置事件监听函数, 在函数内发起AJAX请 ...

  3. uni-app中picker组件的一个坑

    这里直接贴出代码 <view class="goods-info-add fl-sw"> <view>运费模板:</view> <view ...

  4. c++11 常量表达式

    c++11 常量表达式 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #inclu ...

  5. 【Caffe学习笔记】一 、环境安装 Caffe + cuda + windows10 + VS2015 安装笔记， win7也适用

    1. 下载cuda8.0  cudnn5   anaconda https://developer.nvidia.com/cuda-80-ga2-download-archive https://de ...

  6. nodejs request module里的json参数的一个坑

    今天工作的时候遇到一个坑,在客户端用nodejs给服务器发送HTTP请求,服务器老是报错:In the context of Data Services an unknown internal ser ...

  7. python实现IP地址转换为32位二进制

    python实现IP地址转换为32位二进制 #!/usr/bin/env python # -*- coding:utf-8 -*- class IpAddrConverter(object): de ...

  8. 设计模式之Template Method

    1.设计模式的使用场景 模板方法模式(Template Method) 解释一下模板方法模式,就是指:一个抽象类中,有一个主方法,再定义1…n个方法,可以是抽象的,也可以是实际的方法,定义一个类,继承 ...

  9. Monit-开源服务器监控工具

    Monit-开源服务器监控工具 Monit是一个用于管理和监控Unix系统的小型开源工具. Monit进行自动维护和修理, 并且可以在错误情况下执行有意义的因果作用. 比zabbix轻量. 全局配置 ...

  10. Base64编码与解码的作用

    1.便于网络传输. 2.不可见性. 3.适合在http,mime协议下快速传输数据. 4 区别于加密,Base64是可以解码的,编码是 公开的,Base 64编码,任何人都可以解码