前端优化

前端优化分为 资源加载优化和页面渲染优化

资源加载优化可以分为:

* 减小入口文件积  动态加载路由的方式

const homePage = () => import('@/views/homePage/index')

    {
        path: '/homePage ',
        component: homePage ,
        name: 'homePage '
    }

* 静态资源本地缓存

localstorage、sessionstorage、service worker等

* UI框架按需加载

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';

Vue.use(Button)

Vue.use(Input)

* 图片资源的压缩

　　对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力

* 组件重复打包

　　使用CommonsChunkPlugin进行多次引用的包抽离出来，放进公共依赖文件，避免了重复加载组件

* 开启GZip压缩

nmp i compression-webpack-plugin -D
const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
        }
}

* 使用SSR

SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器

页面渲染优化可以分为:

* 优化html代码

　　减少dom节点数量

　　js代码放到底部

　　css代码放到顶部

* 优化js、css代码

　　降低css选择器的复杂性

　　减少重排、重绘操作

　　使用webworker