性能优化

知识追寻者搞了个人站点后，心血来潮来了一波前端性能优化实战！！！

生成分析报告

在 packge.json 中引入"analyz": "vue-cli-service build --mode analyz"

如下示例

"scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "analyz": "vue-cli-service build --mode analyz"
    },

打包时使用如下命令打包，成功后会在 dist 目录下生成 report.html

分析打包命令: npm run build -- --report

效果示例

组件按需引入

在 babelrc.config.js 中按如下配置可以参考官方文档：https://element.eleme.cn/#/zh-CN/component/quickstart

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    // element 按需引入配置
    plugins: [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]
}

main.js 中按需引入

import {
    Pagination,
    Button,
    Dialog,
    Menu,
    Submenu,
    MenuItem,
    MenuItemGroup,
    Input,
    Form,
    FormItem,
    Tag,
    Breadcrumb,
    BreadcrumbItem,
    MessageBox,
    Message,
    // Notification,
    Tree,
    Image,
    // TimeSelect,
    // TimePicker,
    DatePicker,
    Avatar,
    Row,
    Col,
    Container,
    Header,
    Aside,
    Main,
    Footer,
    Card,
    Divider,
    Tooltip,
    Table,
    TableColumn,
    Select,
    Option,
    OptionGroup,
    Switch,
    Alert
} from 'element-ui';

Vue.use(Pagination);
Vue.use(Button);
Vue.use(Dialog);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tag);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
// Vue.use(MessageBox);
// Vue.use(Message);
Vue.component(MessageBox.name, MessageBox);// 解决页面弹出框问题
// Vue.use(Notification);
Vue.use(Tree);
Vue.use(Image);
// Vue.use(TimeSelect);
// Vue.use(TimePicker);
Vue.use(Avatar);
Vue.use(Row);
Vue.use(Col);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main)
Vue.use(Footer)
Vue.use(Card)
Vue.use(Divider)
Vue.use(Tooltip)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Select)
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(DatePicker)
Vue.use(Switch)
Vue.use(Alert)


Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

Gzip压缩

查看各个js 大小

vue.config.js 中引入

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {

//.....
    configureWebpack: config => {
        // gzip
        config.plugins.push(
            new CompressionWebpackPlugin({
                // 正在匹配需要压缩的文件后缀
                test: /\.(js|css|svg|woff|ttf|json|html)$/,
                // 大于10kb的会压缩
                threshold: 10240
                    // 其余配置查看compression-webpack-plugin
            })
        )

        config["performance"] = { //打包文件大小配置
            "maxEntrypointSize": 10000000,
            "maxAssetSize": 30000000
        }
    },
}

压缩大小

打包输出

路由懒加载

	{
            path: '/index',
            name: 'index',
            meta: {
                title: '知识追寻者'
            },
        // 在路由被访问时才会引入组件
            component: (resolve) => require(['@/views/index'], resolve)
        }

nginx 开启 gzip 压缩

	gzip  on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;

最终优化效果

有兴趣的同学们可以来我的个人站点学习！当然知识追寻者是主研后端，偶尔蹭蹭前端！！

vue cli3 性能优化实战