一、设置路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效。更详细的可以参考VueRouter官网的的配置。

const router = new VueRouter({
    routes: [
        {
            path: 'login',
            name: 'login',
            component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
        }
    ]
})

二、使用插件按需引入

babel-plugin-component

三、项目图片懒加载

一次性加载大量图片的时候，容易造成网络资源浪费，同时也可能造成服务器卡顿。当浏览器滚动的时候，对滚动事件进行监听，当图片距离视口的顶部大于浏览器可见视口的宽度的时，图片不加载，这样就可以减少网络资源的浪费。采用 vue-lazyload组件进行实现。

安装组件

yarn add vue-lazyload

main.js 设置

import VueLazyload from 'vue-lazyload' 

Vue.use(VueLazyload)
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

系统中使用

<img v-lazy="img.src" >

四、开启 gzip

安装依赖文件

cnpm install webpack@4.46.0 terser-webpack-plugin@4.2.3 compression-webpack-plugin@6.1.1 -D

vue.config.js 设置 gzip

const path = require('path')

// gzip 压缩
const CompressionPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|txt|ico|svg)(\?.*)?$/i
// 处理 js 的压缩和混淆
const TerserPlugin = require('terser-webpack-plugin')

function resolve(dir) {
  return path.join(__dirname, dir)
}

// vue.config.js
module.exports = {
  /*
    Vue-cli3:
    Crashed when using Webpack `import()` #2463
    https://github.com/vuejs/vue-cli/issues/2463
   */
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  configureWebpack: (config) => {
    //生产环境取消 console.log
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
    // 处理 js 的压缩和混淆
    config.optimization = {
      minimize: process.env.NODE_ENV === 'production',
      minimizer: [
        new TerserPlugin({
          test: /\.js(\?.*)?$/i, // 匹配参与压缩的文件
          parallel: true, // 使用多进程并发运行
          terserOptions: {
            // Terser 压缩配置
            output: { comments: false },
          },
          extractComments: false, // 将注释剥离到单独的文件中
        }),
      ],
    }
  },

  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 压缩
      config.plugin('compressionPlugin').use(
        new CompressionPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8,
          // deleteOriginalAssets: true
        })
      )
    }

    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
      .set('@comp', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@layout', resolve('src/layout'))
      .set('@static', resolve('src/static'))
  },
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖，用于自定义 ant design 主题 */
         
        },
        javascriptEnabled: true,
      },
      sass: {
        data: `@import "@/assets/sass/tk-scss-variable.scss";`,
      },
    },
  },

  devServer: {
    port: 3099,
    proxy: {
      '/bh-sim': {
        target: 'http://localhost:9099',
        ws: false,
        changeOrigin: true,
      },
    },
  },

  lintOnSave: undefined,
}

nginx 开启 gzip

 server {  
	#端口号，不同的程序，复制时，需要修改其端口号
        listen      5099;
	#服务器地址，可以为IP地址，本地程序时，可以设置为localhost
        server_name  localhost;		
        client_max_body_size 2G;
    
    # 开启gzip
        gzip on;
    # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
        gzip_min_length 1k;
    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
        gzip_comp_level 1;
    # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
        gzip_vary on;
    # 禁用IE 6 gzip
        gzip_disable "MSIE [1-6]\.";
    # 设置压缩所需要的缓冲区大小
        gzip_buffers 32 4k;
    # 设置gzip压缩针对的HTTP协议版本
        gzip_http_version 1.0;

	#程序所在目录
        root D:/workSpace/pack/pack_jar/bh-sim/frontEnd;	
        charset utf-8;
            index index.html;

        location / {
            try_files $uri $uri/ /index.html;  
        }

        location @rewrites {
            rewrite ^(.+)$ /index.html last;
        }

	#程序映射地址，将【tick-ehs】改为你程序名称，将【proxy_pass】 改为你自己的后台地址
        location /bh-sim {
            proxy_pass http://localhost:9099/bh-sim;
            proxy_cookie_path / /bh-sim;
        }
    }