今天打算上线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. Creating mailbox file: 文件已存在

    原来linux下添加用户后,会在系统里自动加一个邮箱(系统邮箱),路径是:/var/spool/mail/用户名.可以直接用命令#rm -rf /var/spool/mail/用户名 这样就可以再次添 ...

  2. k8s认证及serviceAccount、userAccount

    1.概述 用kubectl向apiserver发起的命令,采用的是http方式,K8s支持多版本并存. kubectl的认证信息存储在~/.kube/config,所以用curl无法直接获取apis中 ...

  3. IP 、127.0.0.1、localhost 三者区别

    一.Ping命令 1.Ping命令,用来检查两台物理机间的TCP/IP网络是否通畅或者网络连接速度,是TCP/IP协议的一部分. 2.PING (Packet Internet Groper),因特网 ...

  4. python numpy array 的sum用法

    如图: sum可以指定在那个轴进行求和: 且第0轴是纵向,第一轴是横向:

  5. IDEA的第一个java程序

    import java.util.Scanner;public class 阶乘{ public static void main(String[] args) { int sum=1,i; Scan ...

  6. zxx.cms.app 开发中的一些git命令

    第一行命令 查看当前项目git的状态 显示是干净的 第二行创建一个 login 分支 并且切换到login 分支 用于login功能模块的开发 第三行 查看当前 所有的 分支 安装less-loade ...

  7. 使用2种python脚本工具将2个txt文档中的文字进行比较,并计算出Corr, WER正确率,准确率

    一.准备: linux服务器,src2mlf.py   rec2mlf.py   HResults文件,1份源文件和1份需要对比的文件.文件放置于本人云盘 二.使用方法: 1. 对比工具 HResul ...

  8. mysql in 中使用子查询,会不使用索引而走全表扫描

    所以可以将 in 条件中 子查询转换成一张子表,从而通过 join 的形式进行条件限制.

  9. OS 常见函数使用

    os.sep:取代操作系统特定的路径分隔符 os.name:指示你正在使用的工作平台.比如对于Windows,它是'nt',而对于Linux/Unix用户,它是'posix'. os.getcwd:得 ...

  10. 第一章 Django之web框架(1)

    Django 是新一代 Web 框架 中非常出色的成员.那么 Web 框架这个术语的确切含义到底是 什么呢? 要回答这个问题,让我们来看看通过编写标准的 CGI 程序来开发 Web 应用,这在大约19 ...