提高90%加载速度——vuecli下的首屏性能优化

前言

以前用vuecli作了个博客，是一个单页面项目，大概有十个路由
直接npm run build打包出来，有一个1M的巨大js文件

先挂载到服务器上试试
好家伙 这加载时间 仿佛过了半个世纪

首屏页面整整加载了9s 光加载那个大文件就花了8s
这必须得作个优化了，没有用户能忍受9s的白屏而不关闭页面的

过程当中，我还顺便把项目从vuecli 2.x迁移到了vuecli 3，因此接下来还会介绍一些它们在优化上的异同

分析

vuecli 2.x自带了分析工具
只要运行npm run build --report

若是是vuecli 3的话，先安装插件

cnpm intall webpack-bundle-analyzer –save-dev

而后在vue.config.js中对webpack进行配置

chainWebpack: (config) => {
    /* 添加分析工具*/
    if (process.env.NODE_ENV === 'production') {
        if (process.env.npm_config_report) {
            config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                .end();
            config.plugins.delete('prefetch')
        }
    } }

再运行npm run build --report

会在浏览器打开一个项目打包的状况图，便于直观地比较各个bundle文件的大小

能够看到 项目中全部的依赖，全部的路由，都被打包进了同一个文件中

另外，在浏览器中，也能够经过converge来查看代码的使用情况

红色的是下载了但未使用的部分

路由懒加载

当打包构建应用时，JavaScript包会变得很是大，影响页面加载。
若是咱们能把不一样路由对应的组件分割成不一样的代码块，而后当路由被访问的时候才加载对应组件，这样就更加高效了。

在一开始就下载完全部路由对应的组件文件，这明显是不合适的，这就像下载一个app了，因此咱们就须要使用路由懒加载

在router.js文件中，原来的静态引用方式

import ShowBlogs from '@/components/ShowBlogs'

routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]

改成

routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')

以函数的形式动态引入，这样就能够把各自的路由文件分别打包，只有在解析给定的路由时，才会下载路由组件

首屏须要加载的文件变成了橙色的部分，被小弟们分流出去了300k

若是是在vuecli 3中，咱们还须要多作一步工做
由于vuecli 3默认开启prefetch(预先加载模块)，提早获取用户将来可能会访问的内容
在首屏会把这十几个路由文件，都一口气下载了
因此咱们要关闭这个功能，在vue.config.js中设置
参考官网的作法：

设置完毕后，首屏就只会加载当前页面路由的组件了

element-ui按需加载

首屏须要加载的依赖包，其中element-ui整整占了568k
本来的引进方式引进了整个包：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

但实际上我用到的组件只有按钮，分页，表格，输入与警告
因此咱们要按需引用：

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)
Vue.prototype.$alert = MessageBox.alert

注意MessageBox注册方法的区别，而且咱们虽然用到了alert，但并不须要引入Alert组件

在.babelrc文件中添加（vue-cli 3要先安装babel-plugin-component)：

plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

element-ui小了不少，不过看到那个显眼的table.js后想到，table组件只有后台管理页面用到了，不须要全局注册，因此咱们删除main.js中Table和TablColumn的引用，并在后台组件中局部注册

import { Table, TableColumn } from "element-ui";

components: {
    "el-table": Table,
    "el-table-column": TableColumn },

table就被拆分到了路由文件中

组件重复打包

能够看到上图，有两个路由文件都引用了codemirror.js形成重复下载
咱们能够在webpack的config文件中，修改CommonsChunkPlugin的配置

minChunks: 3

把3改成2，就会把使用2次及以上的包抽离出来，放进公共依赖文件，不过因为首页也有复用的组件，因此首页也会下载这个公共依赖文件

首页下载了黄色和灰色部分
拆了半天，又回到原点

固然，咱们能够继续折腾CommonsChunkPlugin的配置来解决这个问题
但在新版webpack中，CommonsChunkPlugin被自由度更高，更高级的SplitChunksPlugin代替

这也是为何我要把项目迁移到vuecli 3（使用webpack4）
默认就作了优化，首页只会下载灰色的部分（235K）

gzip

拆完包以后，咱们再用gzip作一下压缩
安装compression-webpack-plugin

cnmp i compression-webpack-plugin -D

在vue.congig.js中引入并修改webpack配置

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }

能够看到200k以上的文件被压缩到了100k之内

在服务器咱们也要作相应的配置
若是发送请求的浏览器支持gzip，就发送给它gzip格式的文件
个人服务器是用express框架搭建的
只要安装一下compression就能使用

const compression = require('compression')
app.use(compression())

注意，后面这一句，要放在全部其余中间件注册以前

最终效果

首屏加载资源198k，加载时间1s，相比原来速度提高了90%

后记：css是否要拆分

vuecli 3和vuecli2.x还有一个区别是
vuecli 3会默认开启一个css分离插件 ExtractTextPlugin
每个模块的css文件都会分离出来，整整13个css文件，而咱们的首页就请求了4个，花费了很多的资源请求时间
咱们能够在vue.config.js中关闭它

css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: false,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
},

打包出来的文件中，直接就没有了css文件夹
取而代之的是整合起来的一个js文件，负责在一开始就注入全部的样式
首屏加载文件数减小，但体积变大，最终测下来速度没有太大差别
因此，是否要css拆分就见仁见智，具体项目具体分析吧

总结

性能优化是一个很是使人愉悦的过程，同时也是个深坑，有着太多东西，本篇文章开了个头，但愿能对你们有所帮助

参考文章

Vue打包优化之code spliting
https://juejin.im/post/5ac815...
Vue 性能优化：如何实现延迟加载和代码拆分？
https://www.infoq.cn/article/...*zN
Webpack 打包优化之体积篇
https://www.jeffjade.com/2017...
记一次vue+element+echarts项目的优化
https://juejin.im/post/5b0033...