vue首屏性能优化

疆~

已于 2022-04-03 12:05:32 修改

阅读量100

点赞数

分类专栏： Vue2 文章标签：其他

于 2020-09-03 00:35:24 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/108372749

版权

Vue2 专栏收录该内容

196 篇文章 59 订阅

订阅专栏

一，查看包占用

1，安装插件

cnpm intall webpack-bundle-analyzer -D

然后新建vue.config.js，对 webpack进行配置：

module.exports = {
    chainWebpack: (config) => {
        /* 添加分析工具*/
        if (process.env.NODE_ENV === 'production') {
            if (process.env.npm_config_report) {
                config
                    .plugin('webpack-bundle-analyzer')
                    .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                    .end();
                config.plugins.delete('prefetch')
            }
        }
    }

}

再运行 npm run build --report

会在浏览器打开一个项目打包的情况图，便于直观地比较各个 bundle文件的大小

发现echarts比较大，现在注释掉echarts，重新运行 npm run build --report

二，ui框架按需加载

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)
Vue.prototype.$alert = MessageBox.alert