今天打算上线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. selenium登录慕课网

    from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.s ...

  2. ingress之tls和path使用

    ingress tls 上节课给大家展示了 traefik 的安装使用以及简单的 ingress 的配置方法,这节课我们来学习一下 ingress tls 以及 path 路径在 ingress 对象 ...

  3. 针对Web的信息搜集

    信息收集(Information Gathering),信息收集是指通过各种方式获取所需要的信息,在整个渗透测试环节中,信息搜集是整个渗透过程中最为重要的一环,信息搜集可占据整个渗透测试80%左右的工 ...

  4. C# 将一种类型的数组转化为另一种类型的数组

    //字符串数组(源数组) "}; //整型数组(目标数组) int[] iNums; //转换方法 iNums = Array.ConvertAll<string, int>(s ...

  5. sqlserver跨库操作数据

    垮库只能读操作,写操作需要设置权限. USE [jdddb] GO /****** Object: StoredProcedure [dbo].[proc_LYOrderCancel] Script ...

  6. React会自动把虚拟DOM数组展开

    React会自动把虚拟DOM数组展开,放在父级虚拟DOM中,这个特性还是我同事帮我解决一个问题的时候,偶然发现的. 如何将一个数据数组转换为一个虚拟DOM的数组,需要使用map,如下: const n ...

  7. NSInvocation简单总结

    (1)用法 NSInvocation是调用函数的另一种方式,它将调用者,函数名,参数封装到一个对象,然后通过一个invoke函数来执行被调用的函数,其思想就是命令者模式,将请求封装成对象. 例如,有这 ...

  8. 03_ Flume采集(监听)目录到HDFS案例

    采集需求:某服务器的某特定目录下,会不断产生新的文件,每当有新文件出现,就需要把文件采集到HDFS中去 根据需求,首先定义以下3大要素 l.采集数据源,即source——监控文件目录 :  spool ...

  9. 五分钟彻底搞懂你一直没明白的Linux内存管理

    现在的服务器大部分都是运行在Linux上面的,所以,作为一个程序员有必要简单地了解一下系统是如何运行的.对于内存部分需要知道: 地址映射 内存管理的方式 缺页异常 先来看一些基本的知识,在进程看来,内 ...

  10. linux基础_关机重启注销

    1.关机重启命令 (1)shutdown shutdown -h now:表示立即关机 shutdown -h 1:表示1分钟后关机 shutdown -r  now:立即重启 (2)halt:就是直 ...