vue2首页加载慢的问题

canopus4u 发布于2019-08-22 16:11 / 1641人阅读

摘要：开发完了，并部署到服务器后，就遇到了一个非常明显的问题。所以可以利用按需加载来进一步缩小文件的体积。另外图片还可以去下面这个网上压缩一下经过上述的几步，首页的加载速度已经比较快了，项目经理也比较满意。初步结束了首页加载慢的问题的研究。

本次开发的项目中使用了vue2.5.2和自带的vue-cli生成了前端的基本架构。随后在项目开发当中，添加了自己写的UI组件，和复杂的业务逻辑。整个项目包括10几个模块，算比较大的项目了。开发完了，build并部署到nginx服务器后，就遇到了一个非常明显的问题。那就是首页(登录页面)加载太慢，从开始加载到登录页面最终呈现出来，用了30多秒(其实也有原因是公司的网络不好!)，连项目经理都找来了，说：“为什么那么长的时间页面才出来，我们的项目还要部署到公网上去，让客户如何访问？”。自知理亏，于是赶紧开始研究首页加载满的问题。
通过chrome的timeline查看了一下，主要是vendor.js比较大，有1.8M之多，还有的图片比较大，比如登录的整个背景图片，有800K。按照如下的方法开始和浏览器间的速度之争。因为对nginx比较了解，所以先从nginx入手。

1、使用nginx的gzip压缩

使用nginx的gzip压缩，需要使用gzip_static模块。在sbin下运行nginx -V查看是否开启了这个模块。开启gzip_static模块后，nginx会自动查找文件中有没有.gz的文件。
在nginx的conf文件中增加如下的代码：

    gzip on;
    gzip_static on;
    gzip_disable "msie6";
    gzip_min_length 100k;
    gzip_buffers 4 16k;
    gzip_comp_level 3;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;

在vue的webpack config/index.js中修改

productionGzip: true

vue默认没有安装相应的插件，运行如下的安装命令：

npm install --save-dev compression-webpack-plugin

再次重新build后，就会发现很多.gz的文件。而vendor.js从1.8M直接压缩到800多K。加载速度也缩短到10秒之内。感觉很有成就感啊。继续开始下面的优化之旅。

2、使用CDN来加载

将比较大的文件，如vue、vue-router、vuex、axio用cdn中的文件代替，而不是直接打包到vendor中。
（1）在index.html中引入js文件

（2）去掉这些第三方js的import
（3）把第三方的js文件从打包文件中去掉
写在webpack的externals里面

module.exports = {
    ...
    externals:{
       "vue": "Vue",
       ...
    }
}

3、使用vue-router的懒加载

我们使用的方法是：

const User = r => require.ensure([], () => r(require("@/pages/user/user.vue")), "chunkname4")

4、实现elment-ui和echarts的按需加载

本项目虽然有很多的组件是自己写的。但还是用了少数的几个element-ui组件。而echarts只用到了折线图和环形图。所以可以利用按需加载来进一步缩小文件的体积。
（1）element ui 的按需加载：
安装babel-plugin-component

npm install babel-plugin-component - D

修改.babelrc

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "es2015","stage-2"
  ],
  "plugins": ["transform-runtime",
  [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]],

在main.js中按需引入

import { Menu, MenuItem,InputNumber,DatePicker,Popover,Badge,Select,Option } from "element-ui";
import "element-ui/lib/theme-chalk/index.css"

（2）echarts的按需引入
安装 babel-plugin-equire

npm i babel-plugin-equire -D

在.babelrc中添加该插件

"plugins": [
   ....
 "equire"],

创建了一个公用的文件initEcharts.js

const echarts = equire([
  "line",
  "lines",
  "pie",
  "bar",
  "tooltip",
  "title"
])

export default echarts

在需要使用echarts的地方引入该文件。

5、图片的压缩

美工最初交给前端的图是png格式的，比较大。因此直接联系美工修改为jpg格式，图的大小马上减少很多。另外图片还可以去下面这个网上压缩一下：https://tinypng.com/
经过上述的几步，首页的加载速度已经比较快了，项目经理也比较满意。初步结束了首页加载慢的问题的研究。

超融合服务器混合云阿里云服务器各个区域慢的问题 vue2.0 cdn Vue2x 网站速度慢的原因

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94127.html

基于vue2 + muse-ui构建的移动端、PC端轻社区项目 F-Rent 友租

摘要：如果有什么可以帮到你的无论是不是此项目中的问题都可以在提出我会尽我所能帮你解决欢迎大佬们提出好的问题和点子，我会第一时间去修正。前言本项目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack构建的一个移动端、PC端轻社区项目项目地址GitHub 项目更新历史开发环境 Macos + Vs code + Chrome 项目的灵感最初来源：由于我是一个宅男在...

linkFly 2019-08-21 16:54 评论0 收藏0
基于vue2 + muse-ui构建的移动端、PC端轻社区项目 F-Rent 友租

摘要：如果有什么可以帮到你的无论是不是此项目中的问题都可以在提出我会尽我所能帮你解决欢迎大佬们提出好的问题和点子，我会第一时间去修正。前言本项目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack构建的一个移动端、PC端轻社区项目项目地址GitHub 项目更新历史开发环境 Macos + Vs code + Chrome 项目的灵感最初来源：由于我是一个宅男在...

X_AirDu 2019-08-30 15:53 评论0 收藏0
引入外部js脚本加载慢与页面白屏问题

摘要：问题背景最近做的一个项目需要引入一个外部的第三方脚本。什么情况可以用我以上思路引入的第三方脚本较大，加载所需时间较长页面按需加载，整个项目只有其中某几个页面需要用到引入的第三方脚本第三方脚本没加载完就渲染页面导致的页面报错问题背景最近做的一个项目需要引入一个外部的第三方js脚本。由于这是一个关于渲染3D建筑的脚本，所以体积比较大，大概有2M，加载完成也得要个好几秒，网速慢的时候十几...

joywek 2019-08-23 13:58 评论0 收藏0
vue2 + vuex 高度还原饿了么 App，与官方后台真实数据交互，获取商品信息，实现登陆、购

摘要：注此项目纯属个人瞎搞，正常下单请选择饿了么官方客户端。目前下单功能已经实现，下单功能完全采用官网真实数据，可以控制官网发短信或者打电话到指定的手机号码，下单后可以在手机中查看并且付款。前言 vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余...

JeOam 2019-08-20 14:26 评论0 收藏0