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

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

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

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

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

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

1：引入 compression webpack plugin 插件

  1. npm i -D compression-webpack-plugin

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

  1. const path = require("path");
  2. const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件
  3.  
  4. const webpack = require("webpack");
  5. // vue.config.js
  6. module.exports = {
  7.   //基本路径(相对于服务器根目录   静态资源的相对路径)
  8.   publicPath: process.env.NODE_ENV === "production" ? "/dist/" : "/", //font scss资源路径 不同环境切换控制
  9.  
  10.   productionSourceMap:false,//打包时不要map文件
  11.   //输出文件目录
  12.   outputDir: "dist",
  13.  
  14.   //是否在保存的时候检查
  15.   lintOnSave: true,
  16.  
  17.   //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  18.   assetsDir: 'statick',
  19.  
  20.   devServer: {
  21.     // host: 'localhost',
  22.     // host: "0.0.0.0",
  23.     // https: false, // https:{type:Boolean}
  24.     // open: true, //配置自动启动浏览器  http://172.16.1.12:7071/rest/mcdPhoneBar/
  25.     // hotOnly: true, // 热更新
  26.     port: 8090
  27.     // proxy:{
  28.     //   '/': {
  29.     //     target: 'http://192.168.0.125:3000/',
  30.     //     changeOrigin: true,
  31.     //     pathRewrite: {}
  32.     //   },
  33.   },
  34.   configureWebpack: {//引入jquery
  35.     plugins: [
  36.       new webpack.ProvidePlugin({
  37.         $:"jquery",
  38.         jQuery:"jquery",
  39.         "windows.jQuery":"jquery"
  40.       }),
  41.       new CompressionPlugin({//gzip压缩配置
  42.         test:/\.js$|\.html$|\.css/,//匹配文件名
  43.         threshold:10240,//对超过10kb的数据进行压缩
  44.         deleteOriginalAssets:false,//是否删除原文件
  45.       })
  46.     ]
  47.   },
  48. };

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

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

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

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

router.js中

  1. import Vue from "vue";
  2. import Router from "vue-router";
  3.  
  4. Vue.use(Router);
  5.  
  6. export default new Router({
  7.   mode: "history",
  8.   base: process.env.BASE_URL,
  9.   routes: [
  10.     {
  11.       path: "/",
  12.       name: "index",
  13.       component: () =>
  14.         import(/* webpackChunkName: "index" */ "./pages/index.vue"),
  15.         children:[
  16.           {
  17.             path:'/',
  18.             name:'com1',
  19.             component:()=>
  20.               import(/* webpackChunkName: "com1" */ './components/com1.vue'),//像这样的 前面的注释内容是有用的，可以指定chunk的名字
  21.           },
  22.           {
  23.             path:'com2',
  24.             name:'com2',
  25.             component:()=>
  26.               import(/* webpackChunkName: "com2" */ './components/com2.vue')
  27.           },
  28.  
  29.         ]
  30.     }
  31.   ]
  32. });

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引入的几乎都注释完了，就不帖了

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8.     <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
  9.     <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css">
  10.     <link href="https://cdn.bootcss.com/admin-lte/2.4.10/css/skins/_all-skins.min.css" rel="stylesheet">
  11.     <link href="https://cdn.bootcss.com/admin-lte/2.4.10/css/AdminLTE.min.css" rel="stylesheet">
  12.     <title>adminlteandvue</title>
  13.   </head>
  14.   <body>
  15.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  16.     <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
  17.     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  18.     <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  19.     <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  20.     <script src="https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js"></script>
  21.     <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
  22.     <script src="https://cdn.bootcss.com/admin-lte/2.4.10/js/adminlte.min.js"></script>
  23.     <noscript>
  24.       <strong>We're sorry but adminlteandvue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  25.     </noscript>
  26.     <div id="app"></div>
  27.     <!-- built files will be auto injected -->
  28.  
  29.   </body>
  30. </html>

！！！

示例：

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

  1. <head>
  2.   <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css">
  3. </head>
  4. <body>
  5.   <div id="app"></div>
  6. <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  7.   <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  8.   <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
  9.   <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
  10.   <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
  11.   <!-- built files will be auto injected -->
  12. </body>

在vue.config.js里面加上

  1. module.exports = {
  2.  ···
  3. ···
  4.   configureWebpack: {
  5.     resolve: {
  6.       extensions: ['.js', '.json', '.vue', '.scss', '.css'],
  7.       alias: {
  8.        ···
  9.       },
  10.     },
  11.     externals: {
  12.       'vue': 'Vue',
  13.       'vuex': 'Vuex',
  14.       'vue-router': 'VueRouter',
  15.       'element-ui': 'ELEMENT',
  16.       'Axios':'axios'
  17.     }
  18.   },

然后修改src/router/index.js

  1. // 注释掉
  2. // import Vue from 'vue'
  3. import VueRouter from 'vue-router'
  4. // 注释掉
  5. // Vue.use(Router)
  6. ...

修改 src/store/index.js

  1. ...
  2. // 注释掉
  3. // Vue.use(Vuex)
  4. ...

最后修改 src/main.js

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. import store from './store'
  5. import ELEMENT from 'element-ui'
  6. Vue.use(ELEMENT)
  7.  
  8. import axios from 'Axios'
  9. Vue.prototype.$axios= axios
  10.  
  11. /* eslint-disable no-new */
  12. new Vue({
  13.   el: '#app',
  14.   router: router,
  15.   store: store,
  16.   render: h => h(App)
  17. })

注意，这里 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. WPF入门（2）——数据绑定与INotifyPropertyChanged(INPC)

    接上篇,我们在MainViewModel类中创建个属性: public string Name { get; set; } 然后去UI的xaml文件中binding一下: 此时运行程序是不会得到我们想 ...

  2. Codeforces 1189F. Array Beauty

    传送门 首先可以注意到序列里面元素的顺序对答案是没有影响的,所以二话不说先排序再看看怎么搞 考虑枚举每种子序列可能产生的贡献并算一下产生这个贡献的子序列有多少 考虑设 $F(x)$ 表示选择的元素差值 ...

  3. fastclick插件学习（一）之用法

    原理 在检测到touchend事件后, 会通过dom自定义事件模拟一个click事件,并把浏览器300ms之后真正触发的点击事件屏蔽掉,fastclick是不会对PC浏览器添加监听事件 使用 1.引入 ...

  4. luogu4777[模板]拓展中国剩余定理题解

    题目链接 https://www.luogu.org/problemnew/show/P4777 分析 扩展\(CRT\)就是解决模数不互质的情况,说是扩展\(CRT\),其实都是扩欧... 先来考虑 ...

  5. css流程图

     图片链接:https://mp.processon.com/view/link/5da65435e4b0ea86c2b1fb05 之前是图片链接是有点问题,不知道什么原因被删除了,现在已经更新了,如 ...

  6. Spring Cloud（六）服务网关 zuul 快速入门

    服务网关是微服务架构中一个不可或缺的部分.通过服务网关统一向外系统提供REST API的过程中,除了具备服务路由.均衡负载功能之外,它还具备了权限控制等功能.Spring Cloud Netflix中 ...

  7. iPhone 11来了

  8. 二十：强类型HTML辅助方法

    1. 强类型HTML辅助方法的使用 1. HTML辅助方法 例如,要输出一个文本框 @Html.TextBox("email") 2.强类型HTML辅助方法 命名规则是: HTML ...

  9. web开发：javascript案例

    一.浮动与定位复习 二.小米菜单案例 三.轮播图 四.滚动轮播 一.浮动与定位复习 - 浮动与相对定位 ```js// 1.两者均参与布局// 2.主浮动布局, 相对布局辅助完成布局微调// 3.相对 ...

  10. windows下虚拟python环境

    Windows虚拟环境 cd %HOMEDRIVE%%HOMEPATH%\Desktop python3  -m  venv venv 环境变量修改脚本bat,把脚本放到%HOMEDRIVE%%HOM ...