vue性能你知道哪些？

最新推荐文章于 2022-12-15 10:07:34 发布

陈大左

最新推荐文章于 2022-12-15 10:07:34 发布

阅读量522

点赞数 1

分类专栏： vue 文章标签： vue 性能优化

本文链接：https://blog.csdn.net/c347087870/article/details/90906064

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

最近用vue-cli3搭建项目，由于项目比较大，业务逻辑比较多，导致了打包后文件比较大，导致首页页面白屏时间过长，用户体验不友好，可以往下面几个方法进行处理。

js,css代码的最小化压缩和分割核心组件的cdn加载
路由和组件懒加载
gzip的压缩
去除console.log
公共代码抽离

js,css代码的最小化压缩和分割核心组件的cdn加载

根目录的vue.config.js 配置修改
// 修改原生webpack配置 chainWebpack:(config)=>{}

 // webpack配置
    const isProduction = process.env.NODE_ENV === 'production';
    if (isProduction) {
            // 压缩代码
            config.optimization.minimize(true);
            // 分割代码
            config.optimization.splitChunks({
                chunks: 'all'
            })
            //核心组件生产环境外部引入cdn
            var externals = {
                'vue': 'Vue',
                'vuex': 'Vuex',
                'vue-router': 'VueRouter',
                'axios': 'axios',
                'iview':'iview',
                'echarts':'echarts',
                'xlsx':'xlsx',
                'file-saver':'file-saver'
            }
            config.externals(externals)
            const cdn = {
                css: [
                    "https://cdn.bootcss.com/iview/3.4.2/styles/iview.css"
                ],
                js: [
                    // echarts
                    'https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js',
                    // vue
                    'https://cdn.bootcss.com/vue/2.6.6/vue.min.js',
                    // vue-router
                    'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
                    // vuex
                    'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
                    // axios
                    'https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js',
                    // iview
                    'https://cdn.bootcss.com/iview/3.4.2/iview.min.js',
                    // xlsx
                    'https://cdn.bootcss.com/xlsx/0.15.1/xlsx.min.js',
                    // file-saver
                    'https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js'
                ]
            }
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn
                    return args
                })

        }

如果引入了UI库的CSS 需要在生产环境不引入
app.js入口文件

if (process.env.NODE_ENV != 'production') {
    import('iview/dist/styles/iview.css');
}

删除打包的核心代码后 html模板的添加外部js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=renderer content=webkit>
    <meta name=format-detection content="telephone=no">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <title></title>
    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link href="<%=css%>" rel="preload" as="style">
        <link rel="stylesheet" href="<%=css%>" as="style">
    <% } %>
</head>
<body>
    <noscript>
        <strong>We're sorry but login doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong>
    </noscript>
    <div id="app"></div>
        <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
            <link href="<%=js%>" rel="preload" as="script">
            <script src="<%=js%>"></script>
        <% } %>
</body>

</html>

外部cdn

js,css代码的最小化压缩和分割

懒加载的路由配置

const router = new Router({
    routes: [{
            path: '*',
            component: (resolve) => {
                require(['@/views/homebox/home.vue'], resolve)
            },
            name: 'home',
            desc: '首页',
            meta: {
                name: '首页'
            }
        },
        {
            path: '/404',
            component: (resolve) => {
                require(['@/views/errorPage/404.vue'], resolve)
            },
            name: '404',
            desc: '404未找到',
            meta: {
                keep: true,
                name: '404'
            }
        },
        {
            path: '/login',
            component: (resolve) => {
                require(['@/views/login/index.vue'], resolve)
            },
            name: 'login',
            desc: '登录',
            meta: {
                keep: true,
                name: '登录'
            }
        },
        {
            path: '/home',
            component: (resolve) => {
                require(['@/views/homebox/home.vue'], resolve)
            },
            name: 'home',
            desc: '首页',
            meta: {
                name: '首页'
            }
        }

    ]

})

gzip的压缩

Nginx开启Gzip压缩功能，可以使网站的css、js 、xml、html 文件在传输时进行压缩，提高访问速度, 进而优化Nginx性能

	#开启gzip压缩功能
     gzip on;
     gzip_min_length 1k;
     gzip_buffers 4 16k;
     #gzip_http_version 1.0;
     gzip_comp_level 2;
     gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
     gzip_vary off;
     gzip_disable "MSIE [1-6]\.";

去除console.log

根目录 vue.config.js修改
(1) 安装依赖：cnpm i -D uglifyjs-webpack-plugin
(2) 在vue.config.js 最上边引入依赖

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

(3) 在vue.config.js 的configureWebpack函数中修改

configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.plugins.push(
                //生产环境自动删除console
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            drop_debugger: true,
                            drop_console: true,
                        },
                    },
                    sourceMap: false,
                    parallel: true,
                })
            );

        }
    }

公共代码抽离

根目录 vue.config.js修改configureWebpack: config => {}

// 公共代码抽离
            config.optimization = {
                splitChunks: {
                    cacheGroups: {
                        vendor: {
                            chunks: 'all',
                            test: /node_modules/,
                            name: 'vendor',
                            minChunks: 1,
                            maxInitialRequests: 5,
                            minSize: 0,
                            priority: 100
                        },
                        common: {
                            chunks: 'all',
                            test: /[\\/]src[\\/]js[\\/]/,
                            name: 'common',
                            minChunks: 2,
                            maxInitialRequests: 5,
                            minSize: 0,
                            priority: 60
                        },
                        styles: {
                            name: 'styles',
                            test: /\.(sa|sc|c)ss$/,
                            chunks: 'all',
                            enforce: true
                        },
                        runtimeChunk: {
                            name: 'manifest'
                        }
                    }
                }
            }