vue终极性能优化方案(解决首页加载慢问题)

目录

• 前言
• 1.路由懒加载
• 2、打包文件中去掉map文件
• 3、CDN引入第三方库
• 4、gzip打包
• 1、npmi-Dcompression-webpack-plugin
• 2、在vue.config.js中配置
• 3、在NGINX中配置
• 5、终极大招，预渲染
• 1、cnpminstallprerender-spa-plugin--save-dev
• 2、vue.config.js
• 3、router.js
• 4、main.js
• 总结

前言

用vue开发项目上线以后，发现首页加载速度非常慢，如果项目比较大，甚至可能出现10s以上的等待。用户体验非常差，试想如果你准备买一双AJ，登录某宝首页等了足足5s，那肯定果断选择某多多了。

以我们公司的项目为例，输入网址以后会出现十几秒的空白页，如果是后台管理系统还能接受，嵌套式的H5面对的是C端用户，产品肯定是无法接受的。

仔细分析了下，主要是打包后的app.js太大，以及我们引用的一些插件安装包加载比较慢，在网上搜了很多解决加载慢的方案，最终优化的时间移动端H5页面2秒多，后台管理系统5秒多。

1.路由懒加载

{
    path: '/chinaWine',
    name: 'chinaWine',
    component: resolve => require(['./views/chinaWine'], resolve)
},

此方法会把原本打包到一个app.js文件分开成多个js文件打包，这样会减小单个文件的大小，但是不会减小整个js文件夹的大小。

通过这种方式可以做到按需加载，只加载单个页面的js文件。

2、打包文件中去掉map文件

打包的app.js过大，另外还有一些生成的map文件。先将多余的map文件去掉，

找到config文件夹下index.js文件,把这个build里面的productionSourceMap改成false即可

3、CDN引入第三方库

在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，

但也会有一些不能按需引入，我们可以采用CDN外部加载，在index.html中从CDN引入组件，去掉其他页面的组件import，修改webpack.base.config.js，在externals中加入该组件，这是为了避免编译时找不到组件报错。

4、gzip打包

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。

html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。

1、npm i -D compression-webpack-plugin

2、在vue.config.js中配置

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        return {
            plugins: [new CompressionPlugin({
                test: /\.js$|\.html$|\.css/,
                threshold: 10240,
                deleteOriginalAssets: false
            })]
        }
    }
}

3、在NGINX中配置

http {
    gzip  on;
    gzip_min_length    1k;
    gzip_buffers        4 8k;
    gzip_http_version  1.0;
    gzip_comp_level    8;
    gzip_proxied        any;
    gzip_types          application/javascript text/css image/gif;
    gzip_vary          on;
    gzip_disable        "MSIE [1-6]\.";
    #以下的配置省略...
}

nginx -s reload ：修改配置后重新加载生效

5、终极大招，预渲染

其实把上面的优化做完，优化到5秒以内没问题了，但是如果像我司前端页面100多个，比较大的项目，可能还是会有点慢。

上面我们做了那么多，都是基于js执行完以后进行的渲染，如果想要更快一点，还有两种方案，一种是ssr也就是服务端渲染，一种就是预渲染。

预渲染是在js加载前，就生成了一个首页的静态页面，用于加载，不会让你等着了，静态页面的性能不用说了吧，嗖嗖的。

预渲染依赖的是prerender-spa-plugin插件，使用起来也非常的简单,但是坑非常多，一个地方尊重不到就会报错：

1、cnpm install prerender-spa-plugin --save-dev

建议使用淘宝镜像的cnpm，因为npm安装经常失败，血泪教训，倒腾了一上午

2、vue.config.js

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

在plugins下面，找到plugins对象，直接加到上面就行
// 预渲染配置
new PrerenderSPAPlugin({
    //要求-给的WebPack-输出应用程序的路径预渲染。
    staticDir: path.join(__dirname, 'dist'),
    //必需，要渲染的路线。
    routes: ['/login'],
    //必须，要使用的实际渲染器，没有则不能预编译
    renderer: new Renderer({
        inject: {
            foo: 'bar'
        },
        headless: false, //渲染时显示浏览器窗口。对调试很有用。
        //等待渲染，直到检测到指定元素。
        //例如，在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))`
        renderAfterDocumentEvent: 'render-event'
    })
})

3、router.js

需要把vue的router模式设置成history模式

4、main.js

在创建vue实例的mounted里面加一个事件，跟PrerenderSPAPlugin实例里面的renderAfterDocumentEvent对应上。

mounted () {
    document.dispatchEvent(new Event('render-event'))
 },

这是预渲染的基本配置，npm run build 一下，如果dist文件夹多了你想预渲染的文件夹，那么恭喜你，成功了！如果项目是用nginx做的代理，nginx还需要做一些配置，具体是：

location = / {
  try_files /home/index.html /index.html;
}

location / {
  try_files $uri $uri/ /index.html;
}

具体的根据自己需要欲渲染的路由自己配

虽然花了一天的时间，实现了预渲染，但是因为项目之前用的是hash路由，预渲染需要改成history模式，需要修改登录地址，我司用几千个终端商户，计划被迫流产。但是确实很快，适用于自己用的后台、新项目。

总结

到此这篇关于vue终极性能优化方案(解决首页加载慢问题)的文章就介绍到这了,更多相关vue终极性能优化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！