1对1视频聊天源码，别让用户因加载速度而弃用

1对1视频聊天源码，别让用户因加载速度而弃用

在1对1视频聊天源码开发时，我们可以通过多种手段来提升系统的加载速度，如：

方案一、打包文件中去掉map文件

打包的app.js过大，另外还有一些生成的map文件。先将多余的map文件去掉，找到config文件夹下index.js文件,把这个build里面的productionSourceMap改成false即可。

   /*
   Source Maps
   */
    productionSourceMap: true,  // 把这边的true改为false
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

方案二、压缩代码，移除console.log

npm install uglifyjs-webpack-plugin --save-dev

配置vue.config.js:

const isProduction = process.env.NODE_ENV === 'production';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
chainWebpack(config) {
    const plugins = [];
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  }

方案三、打包通过image-webpack-loader插件对图片压缩优化

vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积.
1. 先安装webpack依赖插件image-webpack-loader

npm install image-webpack-loader --save-dev

2. 在vue.config.js中module.exports修改

module.exports = {
  productionSourceMap: false,
  chainWebpack: config => {
    // ============压缩图片 start============
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
      .end()
    // ============压缩图片 end============
  }
}

方案四、公共代码的抽离

在vue.config.js module.exports configureWebpack 里面新增，直接放在gzip压缩下边即可

...
// 公共代码抽离
configureWebpack: config => {
  config.optimization = {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'all',
          test: /node_modules/,
          name: 'vendor',
          minChunks: 1,
          maxInitialRequests: 5,
          minSize: 0,
          priority: 100
        },
        common: {
          chunks: 'all',
          test: /[\\/]src[\\/]js[\\/]/,
          name: 'common',
          minChunks: 2,
          maxInitialRequests: 5,
          minSize: 0,
          priority: 60
        },
        styles: {
          name: 'styles',
          test: /\.(sa|sc|c)ss$/,
          chunks: 'all',
          enforce: true
        },
        runtimeChunk: {
          name: 'manifest'
        }
      }
    }
  }
}
...

以上就是1对1视频聊天源码，别让用户因加载速度而弃用， 更多内容欢迎关注之后的文章