vue cli3 性能優化實戰

性能優化

知識追尋者搞了個人站點后，心血來潮來了一波前端性能優化實戰！！！
個人站點地址：https://zszxz.com/index

生成分析報告

在 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;

最終優化效果

有興趣的同學們可以來 我的個人站點學習！當然知識追尋者是主研后端，偶爾蹭蹭前端！！
歡迎來撩！！！！
https://zszxz.com/index