零碎知识7

打包gzip注意事项

1. compression-webpack-plugin": "^5.0.1", //注意版本，直接安装可能会报错
   • npm i -D compression-webpack-plugin@5.0.1

--vue.config.js
  productionSourceMap: false,//关闭打包时源码映射
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css/, // 需要压缩的文件类型 一般js html css即可 $|\.jpg$|\.jpeg$|\.png
            // threshold: 10240, // 归档需要进行压缩的文件大小最小值，这个是10K以上的进行压缩 不写就全压缩
            deleteOriginalAssets: false// 是否删除原文件
            //不删时 后端可以配置根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件 否则就返回未经gzip压缩的文件。
          })
        ]
      }
    }
  },

打包分析

1. npm install webpack-bundle-analyzer -S
2. vue.config.js里添加

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
 configureWebpack: (config) => {
    config.plugins.push(new BundleAnalyzerPlugin({
    }));
 }
}

3. npm run build或serve时 本地服务:8888 可看到打包文件构成(一般会自动弹出该页面)
4. 自己分析完之后，要上传时可以把vue.config.js里相关部分注释掉

页面反爬虫（阻止被某个搜索引擎搜索到）

页面根目录添加robots.txt文件

左边不区分大小写 （下面这个配置，网站只能通过手动输入地址访问，百度啥的搜不到）
user-agent： *
disallow： /

页面滚动的容器

注意，用vue时最好是在#app里设置 height: 100vh; overflow-y: auto;
当使用弹框时就会发现，如果用的是body作为滚动容器，为了阻止遮罩层背面的页面滚动 会对body设置overflow:hidden,也就导致页面滚动条消失，页面会往右动。
所以别用body当滚动容器

正则小括号整块匹配替换

//10000 => 10k
function numberFormatter(num, digits) {
  const si = [
    { value: 1E18, symbol: 'E' },
    { value: 1E15, symbol: 'P' },
    { value: 1E12, symbol: 'T' },
    { value: 1E9, symbol: 'G' },
    { value: 1E6, symbol: 'M' },
    { value: 1E3, symbol: 'k' }
  ]
  for (let i = 0; i < si.length; i++) {
    if (num >= si[i].value) {
      return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
    }
  }
  return num.toString()
}

vue实现pdf预览的方案

• pdfh5 (基于pdf.js和jQuery)
• vue-pdf (基于pdfjs-dist 用的多 找案例时可以去npm官网里搜它)
• pdfjs-dist（不太好配置，用过一次，转成的canvas模糊）

box-shadow高级用法

• box-shadow实际支持分隔语法，可以使用逗号来生成多重投影，同样利用这个特性，可以生成多重边框。
• box-shadow: 0 12px 48px 16px rgb(0 0 0 / 3%), 0 9px 28px 0 rgb(0 0 0 / 5%), 0 6px 16px -8px rgb(0 0 0 / 8%);