温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue怎么解决首页加载慢的问题

发布时间:2022-02-23 13:48:02 来源:亿速云 阅读:154 作者:iii 栏目:开发技术

这篇文章主要讲解了“vue怎么解决首页加载慢的问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么解决首页加载慢的问题”吧!

    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;
    }

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

    感谢各位的阅读,以上就是“vue怎么解决首页加载慢的问题”的内容了,经过本文的学习后,相信大家对vue怎么解决首页加载慢的问题这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    vue
    AI