vue-cli@3.x + 打包优化加载速度，打包去除console

分手后的思念是犯贱 2022-12-26 09:21 382阅读 0赞

## vue-cli3打包生成环境移除console.log ##

**1.安装依赖**

npm install babel-plugin-transform-remove-console --save-dev

**2.****babel.config.js文件【先配置不同的环境变量VUE\_APP\_ENV】**

const plugins = ["@vue/babel-plugin-transform-vue-jsx"]
    // 生产环境移除console
    if(process.env.VUE_APP_ENV === 'production') {
      plugins.push("transform-remove-console")
    }
    module.exports = {
      presets: [
        '@vue/app'
      ],
      plugins:[
          ...plugins,
      ]
    }

##  vue-cli3 vue 首屏加载速度优化 gzip压缩资源 ##

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度，对于用户量多的网站，开启gizp压缩会大大降低服务器压力，提高加载速度，降低服务器流量成本

**1、安装compression-webpack-plugin**

npm install --save-dev compression-webpack-plugin

卸载

npm uninstall compression-webpack-plugin

高版本的 compression-webpack-plugin 会报错,所以选择了低版本的

npm install compression-webpack-plugin@5.0.2 --save-dev

**2、在`vue.config.js`中如下配置  **vue.config.js配置Gzip压缩

// 导入compression-webpack-plugin
    const CompressionWebpackPlugin = require('compression-webpack-plugin');
    // 定义压缩文件类型
    const productionGzipExtensions = ['js', 'css']
     
    module.exports = {
         //统一配置打包插件
        configureWebpack: {
            plugins: [
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//匹配文件名
                    threshold: 10240,//对10K以上的数据进行压缩
                    minRatio: 0.8,
                    deleteOriginalAssets:false,//是否删除源文件
                })
            ]
        },
    }

或者

// 导入compression-webpack-plugin
    const CompressionWebpackPlugin = require('compression-webpack-plugin');
    // 定义压缩文件类型
    const productionGzipExtensions = ['js', 'css']
     
    module.exports = {
         //统一配置打包插件
          configureWebpack: config => { // webpack 配置
        const plugins = [];
        if (process.env.NODE_ENV === 'production') {
            plugins.push(
              //统一配置打包插件
              new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//匹配文件名
                threshold: 10240,//对10K以上的数据进行压缩
                minRatio: 0.8,
                deleteOriginalAssets: false,//是否删除源文件
              })
            );
        }
        config.plugins = [...config.plugins, ...plugins];
        return {
          output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            filename: `[name].${APP_Version}.${Timestamp}.js`,
            chunkFilename: `[name].${APP_Version}.${Timestamp}.js`
          },
        }
      },
    }

**3、nginx配置gizp**

server {
        listen       8081;
        server_name  localhost;
    
        location / {
            gzip_static on;
            root /usr/share/nginx/html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }

gzip on; #开启或关闭gzip on off
    	gzip_min_length 5k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
    	gzip_buffers 4 16k; #buffer 不用修改
    	gzip_comp_level 8; #压缩级别:1-10，数字越大压缩的越好，时间也越长
    	gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型 
    	gzip_vary on; # 和http头有关系，加个vary头，给代理服务器用的，有的浏览器支持压缩，有的不支持，所以避免浪费不支持的也压缩，所以根据客户端的HTTP头来判断，是否需要压缩

修改后记得执行 `nginx -s reload`

一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221120/ce3667ee9bb4483b8141c2364475b00e.png