个人笔记 前端优化

环境 vue2

个人笔记 前端优化

webpack 优化

生产环境取消 console.log

chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
        // 生产环境不适用 console.log 输出内容
        // 下面一行代码无用
        // config.optimization.minimizer[0].iptions.terserOptions.compress.drop_console = true
        // 可以使用下面代码
        config.optimization.minimizer('terser').tap((args) => {
            Object.assign(args[0].terserOptions.compress, {
                pure_funcs: ['console.log'],
            })
            return args
        })
    }
}

小尺寸图片转成 base64

configureWebpack: {
    module: {
      rules: [
        // 小于 200 * 1024 （200kb） 尺寸的照片转为 base64
        {
          test: /\.(png|jpg|gif|webp)$/i,
          use: [{
            loader: 'url-loader',
            options: {
              limit: 200 * 1024,
              esModule: false
            }
          }],
          type: 'javascript/auto'
        },
      ],
    }
  },

使用 gzip 压缩生产环境包

plugins: isProd
    ? [
          // 使用 gzip 压缩文件 需要后端配合 若使用 http-server 开启本地服务需要使用  http-server -g
          new CompressionWebpackPlugin({
              test: /\.js$|\.html$|\.css/,
              threshold: 10240, // 大于10kb的文件才会被压缩
              deleteOriginalAssets: false, // 是否删除原文件
          }),
      ]
    : []

不生成 sourceMap 文件

// 不生成 SourceMap 文件
  productionSourceMap: !isProd,

项目优化

使用图片懒加载指令

const io = new IntersectionObserver((observers) => {
    observers.forEach(observer => {
        if (observer.isIntersecting) {
            console.log('observer', observer);
            observer.target.src = observer.target.dataset.src
            delete observer.target.dataset.src
            io.unobserve(observer.target)
        }
    })
})
const lazyImg = function (el) {
    io.observe(el)
}
export default lazyImg

路由懒加载

在 router.js 文件中 在顶部一次性引入所有路由的 component 文件会使得首页一次性加载所有页面组件，若使用

component: () => import('@/views/xxx/xxx.vue')

则只会加载当前页面的组件，不会一次性加载所有页面组件，从而实现路由懒加载。

使用 RequestAnimationFrame

代码在 05.vite/fiset-vite 项目中

const animation = (time) => {
  if (!lastTime.value) lastTime.value = time
  const abs = Math.floor(((time - lastTime.value) / needTime) * 100) / 1000
  lastTime.value = time

  if (process.value >= 100) {
    console.timeEnd('a')
    process.value = 100
    cancelAnimationFrame(rafNumber.value)
    return
  }
  process.value += abs
  rafNumber.value = requestAnimationFrame(animation)
}

虚拟列表

当数据有很多时（例如超过 2000），数据会使页面渲染缓慢，此时可以使用虚拟列表，将数据分为多个块，当滚动到对应块时，才渲染对应块的数据。

代码在 05.vite/fiset-vite 项目中