vue项目性能优化方案

￡神魔★判官ぃ 2021-09-02 09:58 484阅读 0赞

**背景**：  
项目采用vue cli3搭建，集成前端组件以及地图效果，导致项目打包后资源包文件特别大，打包速度慢，首屏渲染耗时长，甚至出现左右界面图表数据不渲染的问题。

**优化前准备**：  
首先我们需要先排查影响性能、导致打包资源文件过大的原因，以及代码的使用率

*  webpack-bundle-analyzer：

npm install webpack-bundle-analyzer

// vue.config.js文件（vue cli3根目录下的文件，如果没有，可创建此文件，用于webpack配置）
    
    module.exports = {
        chainWebpack: config => {
            /* 添加分析工具 */
            if (process.env.NODE_ENV === 'production') {
                if (process.env.npm_config_report) {
                    config
                        .plugin('webpack-bundle-analyzer')
                        // eslint-disable-next-line global-require
                        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                        .end();
                    config.plugins.delete('prefetch');
                }
            }
        },
    };

通过命令 npm run build --report 会在打包完成后本地启动一个服务，自动打开127.0.0.1:8888网页，可以查看打包后各个依赖包占用的资源大小，我们可以针对各个依赖包的相关大小作出体积的优化，如果开源库过大可以考虑按需引入，不要全部引入，如果是自己公司封装的私有组件库、类库，可以排查哪部分占用文件过大，打包进行优化处理，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 1]

*  coverage:  
    通过打开控制台(F12)，ctrl+shift+p，搜索coverage，然后选中，然后点击开始录制，之后做一些操作，比如刷新界面，开始录制，查看我们代码的实际使用率，也可以点击文件查看这个文件中具体未使用的那段代码(红色部分)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 3]  
    **优化方案：**
 *  gzip压缩：gzip压缩可以特别明显的提高我们的代码加载效果，提升效率5-6倍左右，它会把诸如js、css等文件进行压缩，并且让我们在加载时去请求那些gz文件而提升请求效率，这部分可以参考博主的另一篇文章 [gzip压缩方案][gzip]
 *  路由懒加载：实际来说，我们在首页就不需要加载其他路由的文件以及数据，而当我们执行到某个具体路由，再去加载当前路由的才是最正确的方案，所以路由懒加载是我们必须要做的，使用方法如下：

这里拿home路由举例，博主每个页面都是分为左、右、中上、中下四个模块的，所以每个路由中都有四个组件，当然，路由懒加载写法是一样的，通过箭头函数返回一个组件，webpackChunkName就是最早的打包后的文件名，同一路由可以写同一个名字，推荐写路由名，方便我们知道是哪个路由下的。

const MainLeft = () => import(/* webpackChunkName: "Home" */ '../components/Home/MainLeft.vue');
    const MainRight = () => import(/* webpackChunkName: "Home" */ '../components/Home/MainRight.vue');
    const MainCenterTop = () => import(/* webpackChunkName: "Home" */ '../components/Home/MainCenterTop.vue');
    const MainCenterBottom = () => import(/* webpackChunkName: "Home" */ '../components/Home/MainCenterBottom.vue');

而在router.js里就是正常写法：

routes: [
            {
                path: '/',
                name: 'Home',
                title: '首页',
                components: {
                    routerLeft: Home.MainLeft,
                    routerRight: Home.MainRight,
                    routerCenterTop: Home.MainCenterTop,
                    // routerCenterBottom: Home.MainCenterBottom,
                },
            },
    ]

开启路由懒加载后，vue cli3项目还需要在vue.config.js文件中配置如下

// vue.config.js文件（vue cli3根目录下的文件，如果没有，可创建此文件，用于webpack配置）
    module.exports = {
        chainWebpack: config => {
        	// 移除 prefetch 插件（避免会预先加载模块/路由）
            config.plugins.delete('prefetch');
        },
    };

(注：之前博主遇到个小坑，项目中有个文件夹，里面写了一些全局封装并且全局注册的组件供其他页面使用，而有些组件中使用了require去动态加载图片导致打包后路由懒加载不生效没有生成对应路由的文件，大家留意一下即可，如果遇到此问题，可以找博主提供解决思路)

*  组件库按需引入：这一点不需要过多赘述了，使用了诸如element ui等组件库的话，官网都有很详细的介绍如何按需加载
 *  图片压缩：安装此插件的时候有可能出现部分依赖安装失败，导致压缩失败，可以先卸载此插件然后用cnpm或淘宝源重新安装

npm install image-webpack-loader

// vue.config.js文件（vue cli3根目录下的文件，如果没有，可创建此文件，用于webpack配置）
    module.exports = {
        chainWebpack: config => {
            // 开启图片压缩
            // config.module
            //     .rule('images')
            //     .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
            //     .use('image-webpack-loader')
            //     .loader('image-webpack-loader')
            //     .options({ bypassOnDebug: true });
        },
    };

*  map映射文件：vue打包会保留源文件的map映射，方便我们打包部署后依然可以通过控制台的source查看搜索源文件的代码，方便定位问题，但是多生成map文件会导致打包文件过大，所以仁者见仁智者见智，看各位是否需要打包部署后方便定位问题吧，不需要的话可以考虑不生成map文件

module.exports = {
        productionSourceMap: true,
    }

*  分包加载：vue打包后会把依赖包都打包到app.js文件里，这样会导致单文件过大，请求耗时，加载缓慢，所以可以考虑把各依赖单独拆分打包，实现多个小文件请求加载的方式，代码如下：

// vue.config.js文件（vue cli3根目录下的文件，如果没有，可创建此文件，用于webpack配置）
    module.exports = {
        configureWebpack: {
            optimization: {
                runtimeChunk: 'single',
                splitChunks: {
                    chunks: 'all',
                    maxInitialRequests: Infinity,
                    minSize: 20000,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name(module) {
                                // get the name. E.g. node_modules/packageName/not/this/part.js
                                // or node_modules/packageName
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                                // npm package names are URL-safe, but some servers don't like @ symbols
                                return `npm.${packageName.replace('@', '')}`;
                            },
                        },
                    },
                },
            },
        },
    };

上述代码会把所有的包括异步请求的模块分割，针对大于20000k的文件，最终命名方式是npm.依赖包.js文件，比如npm.echarts.js，命名可以自定义。

*  重复引用依赖包：封装了一个公共组件库(可通过npm下载)，但是临时为了省事项目中也封装了一些组件单独放在一个文件夹中，最终一些相同的依赖就会被重复引用，比如组件库中用了amcharts图表，而项目中又安装使用了这个图表库，会导致此依赖被重复引用，解决方案：把项目中的组件挪到组件库中，这样同一份依赖就只会被使用一次。(不过我记得webpack有配置可以针对同一依赖多次引用的处理，把依赖进行缓存，避免被多次引用，感兴趣的童鞋可以去查阅下相关资料)
 *  fps：之前项目中封装了一个方法，针对数据请求多的情况，做了fps处理，如果fps小于30就先不执行数据请求，先等现有数据、界面、地图等渲染完毕，fps稳定后再去执行下一部分数据请求、界面渲染，本身是为了能更好更流畅的渲染，但是如果电脑性能本身就很差，fps本身就很低，会导致一直数据不渲染(哈哈哈，给自己埋了个坑)，最终定位问题后发现了这段不合理的处理。大家写代码也要多注意这些情况。

**完整的vue.config.js配置：**

好了，以上就是博主自身项目中关于性能优化的一些处理，大家可以参考下。  
如有问题，请指出，接收批评。  
![在这里插入图片描述][20201017154731967.gif_pic_center]

个人微信公众号：  
![在这里插入图片描述][20200902173036772.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/7316a6bb9a1c4b42a592816907dd6f58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/1fae2e5d1e3448b68ed75c21c6f1d595.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/77a6ece0de3140378fc8ff47b9ae4b58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210813/01a7c8bbfa834af897e2b9c18e20503e.png
[gzip]: https://blog.csdn.net/qq_43363884/article/details/108195408
[20201017154731967.gif_pic_center]: /images/20210813/788ad84e16374a0aac34b0a9a343e43b.png
[20200902173036772.jpg_pic_center]: /images/20210813/644d630228a443bb8760172f65e4f937.png