[前端开发]前端优化，服务管理

动态ployfill

以前为解决浏览器对部分ES6 API不支持的问题都是通过 在项目中直接导入babel-polyfill，不管能不能用到，都全量处理，这样会造成一部分的资源浪费。 动态polyfill的 概念就是根据项目需要指定要 polyfill 的特性，而且会根据浏览器是否支持相关API来动态加载浏览器需要引入的 polyfill，也可以指定强制需要支持的API，直接到 polyfill.io 勾选生成即可

<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise,Reflect"></script> 

静态资源CDN

const cdn = {
    // 忽略打包的第三方库
    externals: {
        "vue": 'Vue',
        "element-ui": "ELEMENT",
        'vue-router': 'VueRouter',
        "vuex": 'Vuex',
        "axios": 'axios',
    },

    // 通过cdn方式使用
    js: [
        'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.min.js',
        'https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js',
        "https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js",
    ],

    css: ["https://unpkg.com/element-ui@2.15.0/lib/theme-chalk/index.css"],
}
#vue.config.js
 chainWebpack: config => {
        if (process.env.NODE_ENV == "production") {
            config.plugin('html').tap(args => {
                args[0].cdn = cdn
                return args
            });

        }
        config.plugins.delete('prefetch');
    },

#/public/index.html
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
    <% } %>
     <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

前端资源开启gz压缩

//打包忽略第三方库
    configureWebpack: config => {
        // 忽略打包配置
        if (process.env.NODE_ENV == "production") {
            config.externals = cdn.externals
            // 开启gzip压缩
            config.plugins.push(
                new CompressionWebpackPlugin({
                    test: /\.(js|css)?$/i, // 哪些文件要压缩
                    filename: '[path].gz[query]',　// 压缩后的文件名
                    algorithm: 'gzip',　// 使用gzip压缩
                    minRatio: 1,　// 压缩率小于1才会压缩
                    deleteOriginalAssets: true // 删除未压缩的文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为
                }
                )
            )
        }

    }

图片懒加载

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  preLoad: 1,
  error: require('./assets/img/error.jpg'),
  loading: require('./assets/img/homePage_top.jpg'),
  attempt: 2
})

 <!-- img中使用图片懒加载。 v-lazy代替v-bind:src -->
<img v-lazy="imgSrc" alt="" > 
 <!-- 背景图中使用图片懒加载。 v-lazy:background-image = "" -->
<li v-for="(url,index) in imgList" v-lazy:background-image="url"></li>

Nginx开放webSocket连接配置

location /socket.io {
            proxy_pass  http://serverIP:port;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection upgrade;
 }

Nginx开启Gzip，处理页面404

server {
        listen 80;
        server_name *.我的domain.com;
        access_log logs/hr.log;
        error_log logs/hr.error.log;
        location / {
              proxy_set_header Host $host;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              index index.html index.htm;
              root /home/yxl/find-house/client/find-house-client/dist/;
              try_files $uri $uri/ /index.html;
        }
       location ^~ /api/ {   #这里是用正则匹配的以api 开头的路径 通过 proxy_pass 属性代理到服务器上node项目运行地址
           proxy_pass http://ServerIP:8001/;  #因为我node项目和前端项目是部署在同一台服务器上的，所以地址用的是127.0.0.1，如果是$
       }
        location /assets {
               alias  /home/yxl/find-house/client/find-house-client/dist/;
                gzip_static on;
                expires max;
                add_header Cache-Control public;
        }
        error_page 500 502 503 504 /500.html;
        client_max_body_size 20M;
        keepalive_timeout 10;
}

^~/api/表示匹配前缀是api的请求，proxy_pass的结尾有/， 则会把/api/*后面的路径直接拼接到后面，即移除api.

普通用户免密登录linux服务器

客户端要想免密登陆服务器必须把客户端的公钥(pub)文件的内容添加到服务器的authorized_keys文件中。

//客户端生成公钥对
yxl@client:~$ ssh-keygen -t rsa -P ''
//将公钥拷贝到目标服务器指定目录下
yxl@client:~$ scp .ssh/id_rsa.pub yxl@server_IP:/home/yxl/.ssh/id_rsa.pub

服务器下将pub文件内容追加到authorized_keys文件中

//将公钥追加到该文件中
richard@richard~$  cat id_rsa.pub >> .ssh/authorized_keys
sudo chmod 700 .ssh && sudo chmod 600 authorized_keys//必须如此权限，否则免密登陆无效

//客户端免密登陆服务器
ssh richard@server_IP

pm2进程管理

• 列出所有进程/应用 pm2 list
• 查看某个进程/应用具体情况 pm2 describe www
• 查看进程/应用的资源消耗情况 pm2 monit
• 查看pm2的日志 pm2 logs
• 查看某个进程/应用的日志,使用 pm2 logs www

pm2日志管理

 pm2 install pm2-logrotate@2.2.0

语法：pm2 set pm2-logrotate:<param> <value>

pm2 set pm2-logrotate:rotateInterval '* * */1 * *' // 每小时备份
pm2 set pm2-logrotate:compress true // 压缩
pm2 set pm2-logrotate:retain 3 // 备份最多3份，也就是备份最进3小时的日志

pm2-logrotate具体配置说明：

• max_size （默认10M）: 当一个文件的大小超过这个值时，它将会对其进行旋转。你可以在最后指定单位:10G, 10M, 10K
• retain（默认为30个文件日志）：保留日志文件数量
• compress（默认false）：是否启用压缩处理所有的旋转日志
• dateFormat（默认格式YYYY-MM-DD_HH-mm-ss）：日志文件名称格式
• rotateModule（默认true）：像其他应用程序一样旋转pm2模块的日志
• workerInterval（默认30秒）：检查日志大小的时间间隔
• rotateInterval（默认每天午夜0 0 * * *）：定时执行旋转
  TZ（默认系统时间）：偏移保存日志文件的标准tz数据库时区

基本命令

• grep -rin "关键字" ./ 查看当前路径下包含关键字的文件
• scp -r yxl@IP:SERVER_PATH localhost_path 服务器文件下载到当前
• scp -r localhost_file yxl@IP:SERVER_PATH 本地文件上传服务器
• find . -name "sql.log.20200*"| xargs rm -f 批量删除
• head -n 7 /etc/services 显示文件前7行内容
• tail -n 3 /etc/services 显示文件最后3行内容
• sudo chmod (-R递归) 777(4读，2写，1可运行)

常用命令

• top 性能分析，动态显示内存（MEM），CPU占用情况
• free top的精简版
• df -hl 查看磁盘占用情况
• du -sh 当前目录占用磁盘空间大小，不包括子目录和目录下的文件，
• netstat 显示网络相关信息
  • -a (all)显示所有选项，默认不显示LISTEN相关
  • -t (tcp)仅显示tcp相关选项
  • -u (udp)仅显示udp相关选项
  • -n 拒绝显示别名，能显示数字的全部转化成数字。
  • -l 仅列出有在 Listen (监听) 的服務状态
  • -p 显示建立相关链接的程序名
  • -r 显示路由信息，路由表
  • -e 显示扩展信息，例如uid等
  • -s 按各个协议进行统计
  • -c 每隔一个固定时间，执行该netstat命令。
• ps -ef |grep -rin '进程名' 显示所有正在运行的命令程序
  • UID： 说明该程序被谁拥有
  • PID：就是指该程序的 ID
  • PPID： 就是指该程序父级程序的 ID
  • C： 指的是 CPU 使用的百分比
  • STIME： 程序的启动时间
  • TTY： 指的是登录终端
  • TIME : 指程序使用掉 CPU 的时间
  • CMD： 下达的指令
• 端口占用情况也可以使用lsof -i:端口号查看，前提安装了lsof