前端vue项目性能优化方案以及打包打开后加载缓慢的优化

1.开启Gzip压缩
前端配置如下：

const path = require('path');

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
    devServer: {
        disableHostCheck: true
    },
    configureWebpack: {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
                '@i': path.resolve(__dirname, './src/assets'),
            }
        },
        plugins: [
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

            // 下面是下载的插件的配置
            new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }),
            new webpack.optimize.LimitChunkCountPlugin({
                maxChunks: 5,
                minChunkSize: 100
            })
        ]
    }
}

后端nginx配置：

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    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;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;

    location / {
        # 用于配合 browserHistory 使用
        try_files $uri $uri/ /index.html;

        # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验 
        # rewrite ^/(.*)$ https://preview.pro.loacg.com/$1 permanent;

    }
    location /api {
        proxy_pass https://preview.pro.loacg.com;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

server {
  # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验 
  listen 443 ssl http2 default_server;

  # 证书的公私钥
  ssl_certificate /path/to/public.crt;
  ssl_certificate_key /path/to/private.key;

  location / {
        # 用于配合 browserHistory 使用
        try_files $uri $uri/ /index.html;

  }
  location /api {
      proxy_pass https://preview.pro.loacg.com;
      proxy_set_header   X-Forwarded-Proto $scheme;
      proxy_set_header   Host              $http_host;
      proxy_set_header   X-Real-IP         $remote_addr;
  }
}```
2.路由使用懒加载，虽然我也用了，但感觉不太明显。但是网上很多人都这么说，那就懒加载吧。
案例如下：

{ path: ‘/home’, name: ‘home’, component: resolve => require([’@/components/home’],resolve) },

3.压缩项目中的图片大小。特别是背景图啥的。
4.去除多余的conslog，debuuger，什么的。vscode编译器全局去除
	1.console.log()加了分号
	console\.log\(.*?\);
	2. console.log()没加分号
	console\.log\(.*?\)
前端性能优化知识总结
1.减少http请求。如：合并css、js、
2.合理利用缓存功能。如：缓存常用图片和css、js资源
3.合理安排内容渲染顺序。如：css优先加载，js最后加载，部分资源按需加载
4.压缩合并资源。如：压缩图片和js、css资源
5.减少对cookie的使用。如：cookie会在服务器和浏览器之间传递，导致资源浪费
6.优化代码层面：如：尽量减少闭包和递归的使用，减少对DOM操作，避免嵌套循环和"死循环"，代码尽量低耦合高内聚，注意定时器的及时清理，能使用css完成的动画就不用js，

原文链接：https://blog.youkuaiyun.com/lxy869718069/article/details/108484540