Performance optimization

Knowledge seekers made a personal site, a wave of front-end performance optimization combat!! Personal website address: zszxz.com/index

Generate analysis report

Json: “vue-cli-service build –mode analyz”

The following example

"scripts": {
        "serve": "vue-cli-service serve"."build": "vue-cli-service build"."lint": "vue-cli-service lint"."analyz": "vue-cli-service build --mode analyz"
    },
Copy the code

Use the following command to package, and report. HTML will be generated in the dist directory

Analysis package command: NPM run build — –report

Effect of the sample

Components are imported on demand

In babelrc.config.js, you can refer to the official documents as follows: element.eleme.cn/#/zh-CN/com…

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'].// Element introduces configuration on demand
    plugins: [
        [
            "component",
            {
                "libraryName": "element-ui"."styleLibraryName": "theme-chalk"}}]]Copy the code

On demand in 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);// Resolve the page pop-up problem
// 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;
Copy the code

Gzip compression

View individual JS sizes

Introduction of vue. Config. Js

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

module.exports = {

/ /...
    configureWebpack: config= > {
        // gzip
        config.plugins.push(
            new CompressionWebpackPlugin({
                // Matching the file suffix to compress
                test: /\.(js|css|svg|woff|ttf|json|html)$/.// Larger than 10KB will compress
                threshold: 10240
                    For the rest of the configuration, see compression-webpack-plugin
            })
        )

        config["performance"] = { // Package file size configuration
            "maxEntrypointSize": 10000000."maxAssetSize": 30000000}}},Copy the code

Compressed size

Packaging output

Route lazy loading

	{
            path: '/index',
            name: 'index',
            meta: {
                title: 'Knowledge seeker'
            },
        // Components are introduced only when the route is accessed
            component: (resolve) => require(['@/views/index'], resolve)
        }
Copy the code

Nginx enables gzip compression

    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;

Copy the code

Final optimization effect

Interested students can come to my personal site to learn! Of course, the knowledge seeker is the master grind backend, and occasionally the front end!! Welcome to ！！！！ zszxz.com/index