Gzip compression

Download the compression will webpack – the plugin package

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

Copy the code

Vue. Config. js file to introduce compression-webpack-plugin package and do the corresponding configuration

// 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 /, / / matching filename threshold: DeleteOriginalAssets: false // Do not delete source}))}... module.exports = { ... configureWebpack: { plugins: [ ...prodPlugins ] } ... } // add 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; }Copy the code

White during optimization

Download vue-skeleton-webpack-Plugin skeleton screen

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

Copy the code

The vue-skeleton-webpack-plugin package is introduced in the vue.config.js file and is configured accordingly

// 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') // 
          }
        }
      })
    ]
  }
  ...
}
Copy the code

// 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)
})
Copy the code
/ / @ / components/skeleton/index. The vue < template > < div > place animation... </div> </template>Copy the code

The development environment optimizes compilation speed

Download the Babel – plugin – dynamic – import – node package

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

Copy the code

The babel.config.js file is configured

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

Element is introduced on demand

The official website documentation is very detailed, directly see the documentation

Vxe-table is imported on demand

Download the Babel – plugin – import

npm install babel-plugin-import --save-dev
Copy the code
// babel.config.js module.exports = { 'plugins': [ ... [ 'import', { 'libraryName': 'vxe-table', 'style': True // Whether styles are also loaded on demand}],...] }Copy the code

// main.js

import 'xe-utils'
import '@/utils/plugins/table'
Copy the code
// @/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, 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) // Reinstall the core library vue. use(Table)Copy the code