祖传代码是传奇——性能优化

[jiangshanmeta]

祖传代码 还要继续 ，扯点优化的话题吧

按需引入

祖传代码的pc端采用了element-ui, 而且完整引入的, 但是实际上只用到了其中的1/3左右, 所以考虑通过按需引入进行优化。

根据文档的说法安装babel-plugin-component, 然后在入口文件中使用需要的插件即可。这样做使得包的总体积减少了350k(js和css), 考虑到这个项目构建出来总共1.5M左右, 这个优化已经不错了。

祖传代码的m端采用了vant, 根据文档的说法安装babel-plugin-import,按照同样的思路优化即可。

图片

CDN

图片放CDN, 分散请求的压力, 常规优化方式了(顺便吐槽下一个loading的图有1M, 这也...)

禁止图片内联

图片资源内联(即通过url-loader打成base64形式)可以减少HTTP请求, 但是实际情况是天天加需求(就那几个页面改来改去), 图片根本就没变过, 这种情况下图片禁止内联反而有利于缓存。

在vue.config.js中做如下修改

chainWebpack: config => {
    config.module
        .rule('images')
        .use('url-loader')
        .loader('url-loader')
        .tap(options => Object.assign(options, {
            limit: 0,
        }));
},

减少不必要组件实例化

在PC端系统有Header(包括logo 菜单之类的)和Footer(包括备案号之类的), 这是个很常见的需求。但不是所有页面都有Header和Footer, 祖传代码的实现是需要的页面(就是绝大部分)都单独引入这两个组件，然后在模板里写。显然每个页面Header和Footer组件都要重新实例化, 性能影响是一方面, Footer那个组件还会在初始化的时候都请求备案号，还没做缓存，所以...

优化方式是把那两个组件上移到App组件中, 然后通过路由原信息判断是否需要隐藏

<div id="app">
    <AppHeader v-show="!isHiddenHeaderFooter" />
    <router-view class="app-main" />
    <AppFooter v-show="!isHiddenHeaderFooter" />
</div>

computed: {
    isHiddenHeaderFooter () {
        return this.$route.matched.some((record) => {
            // 需要隐藏的是少数 配的页面最少
            return record.meta && record.meta.isHiddenHeaderFooter;
        });
    },
},

异步组件

祖传代码里根本没有采用异步组件(包括页面级组件), 这意味着上来就会加载整个应用...

异步组件, 常规优化方式了, 虽说会使得包的总体积增加几十k, 总比直接把整个应用全部加载好