记一次前端性能优化——vue-cli4优化首屏加载

一、前言

vue.js是一款时下非常流行的前端框架，很多公司，例如阿里、腾讯、字节等都在积极应用vue作为前端开发框架。这就说明，熟练使用vue开发前端页面、熟悉vue实现原理以及会通过一些技巧进行用户体验优化便成为了你冲击大厂的资本。在学习过程中，我成功实现了性能优化的一部分——优化首屏加载，特此记录，以便以后复习与查阅、亦或是分享给更多需要的人。

二、影响加载速度的因素

其实不难发现，我们只需要在加载自己的线上项目的时候，打开控制台，进入Network标签，查看各个文件的加载速度，我们很快就能发现一个名叫chunk-vendors.***.js的文件，它的加载时间是秒级的，而一般情况下、没经过优化时的体积几乎都在MB级别。

所以，如果想要缩短加载速度，那就必须减小这个文件的体积。

三、优化方式

文章仅记录一些常用、并且效果立竿见影的方法

按需引入外部
关闭sourcemap
cdn引入项目依赖
路由懒加载
gzip暴力压缩

四、实现方式

1、按需引入外部插件

在项目开发中，我们经常会用到一些便捷的插件。有很多插件的文档会让你直接将插件在main.js文件中全局引入，但是我们又只有几个页面都会用到。这个时候我们就可以通过在页面中单独引入插件的方式，来减少首屏需要加载的模块。

<script>// 页面中引入插件import element from './element.vue'export default {components: {element}}
</script>

除此之外，我们偶尔也会用到一些组件库，例如element-ui，iView等，来减少工作量，提升开发效率。这类组件库几乎都有对应的组件按需引入的方式，不需要一次性引入全部组件库的组件。引入方式大家可以自行去组件库官方查看，这里不再赘述。

2、关闭sourcemap

只需要在vue.config.js文件中加入一行配置即可：

module.exports = {productionSourceMap: false
}

sourcemap是为了方便在生产环境中调试的，因为生产环境的代码都是经过压缩的，看代码会很不方便，而sourcemap相当于是源代码的索引，可以直接定位到源代码出现bug的位置。但是，每个js文件都会带一个sourcemap，而有时候sourcemap文件又会很大，而导致拖慢首屏加载，所以我们在这里将它关掉。

3、cdn引入项目依赖

在项目开发的时候，我们会通过npm引入很多的项目依赖，而这些依赖都会在构建项目时一同被打包进生产环境的应用程序里，导致线上包的体积增大，拖慢加载速度。所以，我们可以将一些体积较大的依赖包，通过cdn的方式引入到项目中，令其不占用线上包的体积。

(1) 在index.html模板文件中，引入通过标签的方式引入依赖。这里推荐使用jsdelivr作为cdn的公共库，速度稳定，资源丰富

<!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="/imgs/logo-mi.png"><title><%= htmlWebpackPlugin.options.title %></title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.14.0/lib/theme-chalk/index.css">
</head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js"></script><script src="https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.0/lib/index.min.js"></script>
</body></html>

(2) vue.config.js文件中添加打包忽略 => webpack配置文档，这里的键值对不是随意配置的，具体怎么写可自行在网上搜索，这里仅列举几个常用的依赖包

module.exports = {configureWebpack: {externals: {vue: 'Vue','vue-router': 'VueRouter',vuex: 'Vuex','element-ui': 'ELEMENT',axios: 'axios'}}
}

(3) 关于是否需要删除原有的import语句

可删可不删，建议在项目中区分一下开发环境和生产环境，在生产环境中删除import语句即可。

4、路由懒加载

平时开发项目时，我们会这样配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Index from './pages/index';
import Login from './pages/login';Vue.use(Router);export default new Router({routes: [{path: '/index',name: 'index',component: Index,meta: {title: '人事管理系统'}}, {path: '/',name: 'login',component: Login,meta: {title: '欢迎您，请登录'}}]
});

这样配置是没问题的，但是会导致在首次启动项目时，会一次性加载所有的页面，导致拖慢加载速度。所以，我们可以通过使用路由懒加载的方式来解决这个问题。这里仅介绍一种实现方式，其他方式可自行搜索。

import Vue from 'vue';
import Router from 'vue-router';Vue.use(Router);export default new Router({routes: [{path: '/index',name: 'index',component: () => import('./pages/index'),meta: {title: '人事管理系统'}}, {path: '/',name: 'login',component: () => import('./pages/login'),meta: {title: '欢迎您，请登录'}}]
});

5、gzip暴力压缩

gzip可以将打包后文件的体积压缩很大一部分体积，压缩力度达70%，对于性能优化来说是十分有必要的。

(1) 安装compression-webpack-plugin

npm i compression-webpack-plugin@1.1.12 --save-dev

(2) 在vue.config.js中开启gzip

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {configureWebpack: {plugins: [new CompressionPlugin({algorithm: 'gzip',test: /\.(js|css)$/,         // 匹配文件名threshold: 10240,            // 对超过10k的数据压缩deleteOriginalAssets: false, // 不删除源文件minRatio: 0.8                // 压缩比})]}
}

(3) nginx开启gzip

server {listen       80;server_name  localhost;# 开启gzipgzip on;# 压缩的文件类型gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;# 是否在http header中添加Vary: Accept-Encoding，建议开启gzip_vary on;
}

五、写在最后

经过这几步优化之后，chunk-vendors.***.js文件的体积应该已经只剩几十KB了，这样的体积的加载时间就是毫秒级了，相较于之前的秒级已经优化了很多了，用户体验也会上升一个档次。

文章或许存在纰漏，欢迎指正。