vue 优化

gzip压缩

下载compression-webpack-plugin包

npm install compression-webpack-plugin --save-dev 

vue.config.js 文件里面引入 compression-webpack-plugin包并做相应的配置

// vue.config.js

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

...
const prodPlugins = []
if (process.env.NODE_ENV !== 'development') {
  prodPlugins.push(new CompressionWebpackPlugin({
    test: /\.js$|\.html$|\.css/, // 匹配文件名
    threshold: 10240, // 对超过10k的数据压缩
    deleteOriginalAssets: false // 不删除源文件
  }))
}

...

module.exports = {
  ...
  configureWebpack: {
    plugins: [
      ...prodPlugins
    ]
  }
  ...
}

// yaml文件中添加


location / {
  root /opt/public/src;
  add_header Cache-Control no-store;


// add 
  gzip on;
  gzip_static on;
  gzip_http_version 1.1;
  gzip_comp_level 3;
  gzip_min_length 10k;
  gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp font/woff text/css;

  // add end

  index index.html;
  try_files $uri $uri/ /index.html =404;
}

白屏优化

下载vue-skeleton-webpack-plugin 骨架屏

npm install vue-skeleton-webpack-plugin --save-dev 

vue.config.js 文件里面引入 vue-skeleton-webpack-plugin 包并做相应的配置

// vue.config.js
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

module.exports = {
  ...
  configureWebpack: {
    plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.join(__dirname, 'src/components/skeleton/index.js') // 
          }
        }
      })
    ]
  }
  ...
}

// src/components/skeleton/index.js
import Vue from 'vue'
import Skeleton from '@/components/skeleton/index.vue'

export default new Vue({
  components: {
    Skeleton
  },
  render: h => h(Skeleton)
})

// @/components/skeleton/index.vue

<template>
<div>放置动画...</div>
</template>

开发环境优化编译速度

下载babel-plugin-dynamic-import-node包

npm install babel-plugin-dynamic-import-node --save-dev 

babel.config.js 文件里面配置

module.exports = {
  ...
  'env': {
    'development': {
      'plugins': ['dynamic-import-node']
    }
  },
  ...
}

element按需引入

官网文档很详细，直接看文档

vxe-table 按需引入

下载babel-plugin-import

npm install babel-plugin-import --save-dev

// babel.config.js
module.exports = {
  'plugins': [
    ...
    [
      'import',
      {
        'libraryName': 'vxe-table',
        'style': true // 样式是否也按需加载
      }
    ],
    ...
  ]
}

// main.js

import 'xe-utils'
import '@/utils/plugins/table'

// @/utils/plugins/table
import Vue from 'vue'
import XEUtils from 'xe-utils'

import {
  VXETable,
  Table,
  Icon,
  Column,
  Header,
  Footer,
  Filter,
  Edit,
  Menu,
  Export,
  Keyboard,
  Validator

} from 'vxe-table'

import zhCN from 'vxe-table/lib/locale/lang/zh-CN'

VXETable.setup({
  i18n: key => XEUtils.get(zhCN, key)
})

// 先安装依赖模块
Vue.use(Icon)
Vue.use(Column)
Vue.use(Header)
Vue.use(Footer)
Vue.use(Filter)
Vue.use(Edit)
Vue.use(Menu)
Vue.use(Export)
Vue.use(Keyboard)
Vue.use(Validator)

// 再安装核心库
Vue.use(Table)