vue-cli3首屏加载优化

首屏加载优化项目基于vue2.x+vue-router + vuex + element-ui结合 vue-cli3.0背景和结果：项目上线完首屏加载比较慢，加载时间为11s+,优化之后加载时间控制在4s左右，打包体积从原来的5.76M变为2.54M。优化方向：1.组件按需加载。2.将图片压缩。3.cdn引入资源（vue,vuex,vue-router,组件库等）...

ethan.Yin

3424人浏览 · 2019-05-16 17:55:51

ethan.Yin · 2019-05-16 17:55:51 发布

首屏加载优化

更新于2019-07-11

项目基于vue2.x+vue-router + vuex + element-ui 结合 vue-cli3.0.
背景和结果：项目上线完首屏加载比较慢，加载时间为11s+,优化之后加载时间控制在4s左右，打包体积从原来的5.76M变为2.54M。

优化方向：

1.组件按需加载。
2.将图片压缩。
3.cdn引入资源（vue,vuex,vue-router,组件库等）
4.利用gzip(需要服务器开启gzip)

其他：去除注释及多余代码，利用七牛云这种cdn网站存放静态资源！！
如果你想占领速度的高地，你还是得 SSR(官网)

一些工具：
Webpack Bundle Analyzer插件，webbpack的打包分析工具 Webpack Bundle Analyzer；
图片压缩网站：TinyPNG BEJSON
测速网站：Pingdom / webPageTest(推荐)
webpack打包分析工具安装：

npm install --save-dev webpack-bundle-analyzer //npm安装
yarn add -s webpack-bundle-analyzer -D//yarn 安装

接着还需要在vue.config.js里面配置①

module.exports = {
    baseUrl: process.env.NODE_ENV == 'production' ? './' : '/',
    outputDir: 'dist',
    assetsDir: 'static',
    chainWebpack: config => {//①这里是配置的部分
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    },
}

然后运行项目就会有这样一个页面出来，表示打包后的文件大小（鼠标滑入文件块显示）。你就根据这个不断优化看你的项目文件优化后大小。
在这里插入图片描述

图片压缩网站，拖拽图片到该位置，自动压缩，大点的png图片图片压缩还是可观的，最后用ps改下后缀名为jpg,或者直接改，能用就行。为什么呢，因为我发现jpg的图片即使很大（有些jpg压缩不了，尴尬），但是请求时间比相同大小的png图片用时更少，后面再去了解原因。
补充：我们ui用的是蓝湖，我下载jpg格式比png格式体积更小，利用那个网站压缩的比例也更高！图片模糊程度肉眼看不出来。
用了第一个网站压缩的情况下，还能用上面提供的第二个网站压缩一下，效果可观的！
在这里插入图片描述
测速网站：将你部署的网站域名，放入URL即可。等待一会结果就出来了。选Asia,如果你是国际网站那么就需要选其他地方都测试下看。

在这里插入图片描述

正题开始
组件按需加载
官网说的很明白了

//main.js
import {Input,Radio,FormItem,Icon,Row,Col,Upload,Message,MessageBox} from 'element-ui'

Vue.use(Input);Vue.use(Radio);Vue.use(FormItem);Vue.use(Icon);Vue.use(Row);Vue.use(Col);Vue.use(Upload);
Vue.use(Loading);Vue.use(DatePicker);Vue.use(Table);Vue.use(TableColumn);
//Vue.use(Message);Vue.use(MessageBox);//

上面message与MessageBox如果你用Vue.use()方法使用，他会自动执行一遍如果要用这样用
方法一：全局使用

Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;//因为我用到了confirm

方法二：需要的模板内使用

//user.vue
import Message from 'element-ui'
mounted(){
Message.error(“错误！“)；
}

CDN引入
几个cdn资源站： jsdeliver , bootCDN, unpkg 后面这个网站搜的时候在地址后面加 ‘/搜索包’,
首先在html中script标签引入

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="images/x-icon" href="logo1.png">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.4.8/lib/theme-chalk/index.css">

    <script src="https://cdn.jsdelivr.net/npm/lottie-web@5.5.5/build/player/lottie.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.6/dist/vue-router.min.js"></script>
    <!--你如要用vue devtools,需引用vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.4.8/lib/index.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/crypto-js@3.1.9-1/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsencrypt@3.0.0-rc.1/bin/jsencrypt.min.js"></script>
	
    <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
	
	<script src="https://cdn.bootcss.com/iview/3.4.2-rc.1/iview.min.js"></script>
    <title>Title</title>
</head>

vue.config.js

module.exports = {
    // 部署应用的根路径(默认'/'),也可用相对路径(存在使用限制)
    baseUrl: process.env.NODE_ENV == 'production' ? './' : '/', 
    outputDir: 'dist',
    assetsDir: 'static',
    configureWebpack: {//这里是添加的部分
      externals:{
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'element-ui': 'ELEMENT',
        'axios': 'axios',
        'echarts': 'echarts',
	    'lottie-web': 'lottie',
        'jsencrypt': 'JSEncrypt',
        'iview': 'iview'
      }
    },
}

gzip
这个优化方式需要服务器（后端）开启gzip,这里我只说一下前端需要做的事情

注意： gzip_static 生效的前提是nginx（如果用的是nginx）开启了gzip_static压缩并且请求目录下存在名称相同且以.gz 结尾的文件。
使用 gzip_static 压缩的话要先准备好压缩后的 gz 文件，并且服务器会消耗更多的空间来存储压缩文件和原文件，这个有利有弊要自己衡量。

参考：首屏优化加载 github/vue-cli3-config

先安装 compression-webpack-plugin 插件

npm  i compression-webpack-plugin -save-dev
//或者
yarn -D compression-webpack-plugin

//vue.config.js
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);//检测构建环境
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
configureWebpack: config => {
      if(IS_PROD){
        const plugins = [];
        plugins.push(
          new CompressionWebpackPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: productionGzipExtensions,
            threshold: 10240,
            minRatio: 0.8,
          })
        );
        config.plugins = [
          ...config.plugins,
          ...plugins
        ];
      }
    }
};

然后打包（yarn build）可以看到超过10k的文件均进行了打包，拥有.gz后缀的同名文件

nginx配置gzip:

server {
  server_name localohst;
  gzip on;  #开启gzip压缩
  gzip_min_length 1; #最小的长度，1K，文件如果太小，小于1K，就不会压缩,因为没准压缩之后还要变大
  #设置缓存的单位，压缩的时候要分配的缓冲区，缓冲区以16K为单位，往缓冲区写入内容的时候超过16K的时候，那么就会按照4倍的大小创建新的缓冲区，也就是建立一个64K的存储，这样把压缩的内容倒进去
  gzip_buffers 16 8k; 
  #压缩级别1-9，比如level为1的话，压缩的比例比较低，但是效率比较高，比如100K的文件压缩之后还剩40K或者50K，但是处理的时间很短；如果level为9的话，压缩的效果最好，效率会低一点，比如还是100K的文件，压缩的会更小，甚至20K ，这样对cpu消耗会高点，一般设置中间差不多
  gzip_comp_level 6;   
  #定义了压缩的类型，比如文本的，js、css等文本文件压缩，像是图片啊，就没必要定义了，本身就支持，这里就不需要定义了，默认压缩text/html 不需要指定，否则报错
  gzip_types
    text/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xml
    text/javascript application/javascript application/x-javascript
    text/x-json application/json application/x-web-app-manifest+json
    text/css text/plain text/x-component
    font/opentype application/x-font-ttf application/vnd.ms-fontobject
    image/x-icon;
    
  gzip_disable "MISE [1-6]\.";#ie1~6禁用gzip
  gzip_vary on; #是否在http header中添加Vary: Accept-Encoding
}

nginx配置更多细节

关于vue-cli4.x创建的项目中vue.config.js配置cdn和图片压缩参考这里： vue-cli4-config

写出来是一个记录和相互学习的目的！

你想吃彩虹糖吗？我有长颈鹿，可以挤给你！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

ethan.Yin

@qq_39370934

已为社区贡献11条内容