实习随笔-12、Vue打包压缩配置

一、安装

npm i compression-webpack-plugin@5.0.1

npm i image-webpack-loader

npm i webpack-bundle-analyzer -D

二、项目根目录下创建vue.config.js

1、gzip配置

项目

const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        config.plugins.push(
            ...[
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: /\.(js|css|html|svg)$/i,
                    threshold: 2048,
                    minRatio: 0.8
                })
            ]
        );
    }
}
}

nginx

	gzip  on;
    gzip_min_length 8k;
    gzip_buffers 4 16k;
    gzip_comp_level 5;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
    gzip_static on;
    gzip_http_version 1.1;
    gzip_vary on;
    gzip_proxied off;
    gzip_disable msie6;

2、图片压缩配置

module.exports = {
 chainWebpack: config => {
 	 config.module
      .rule('min-image')
      .test(/\.(png|jpe?g|gif)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ disable: process.env.NODE_ENV == 'development' ? true : false })//此处为ture的时候不会启用压缩处理,目的是为了开发模式下调试速度更快,网上错误示例直接写为disable:true,如果不去查看文档肯定是要被坑的
      .end()
 }
}

三、打包分析

1、配置

module.exports={
 if (process.env.NODE_ENV === 'production') {
        // 启动时动态创建一个html：http://localhost:8888/report.html
        // config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
        // 生成一个静态html，report.html
        config.plugin('webpack-report').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [
            {
                analyzerMode: 'static'
            }
        ]);
    }
}

2、运行打包命令后，在浏览器打开http://localhost:8888/report.html，就可以看到项目打包后各文件的大小

四、代码附上

const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
  publicPath: '/',
  outputDir: 'dist', //打包后的目录名称
  assetsDir: 'static', //静态资源目录名称
  productionSourceMap: false, //去掉打包的时候生成的map文件
  lintOnSave: false,
  filenameHashing: false,
  runtimeCompiler: false,
  configureWebpack: {
      output: { // 输出重构  打包编译后的 文件名称  【模块名称.时间戳】
          filename: `[name].${Timestamp}.js`,
          chunkFilename: `[name].${Timestamp}.js`
      },
  },
  lintOnSave: false,
  devServer: {
      overlay: {
          warning: false,
          errors: false
      }
  },
  chainWebpack: config => {
	config.module
	      .rule('min-image')
	      .test(/\.(png|jpe?g|gif)(\?.*)?$/)
	      .use('image-webpack-loader')
	      .loader('image-webpack-loader')
	      .options({ disable: process.env.NODE_ENV == 'development' ? true : false })//此处为ture的时候不会启用压缩处理,目的是为了开发模式下调试速度更快,网上错误示例直接写为disable:true,如果不去查看文档肯定是要被坑的
	      .end()
	
	      if (process.env.NODE_ENV === 'production') {
	        // 启动时动态创建一个html：http://localhost:8888/report.html
	        // config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
	        // 生成一个静态html，report.html
	        config.plugin('webpack-report').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [
	            {
	                analyzerMode: 'static'
	            }
	        ]);
	    }
},
	configureWebpack: config => {
	    if (process.env.NODE_ENV === 'production') {
	        config.plugins.push(
	            ...[
	                new CompressionWebpackPlugin({
	                    filename: '[path].gz[query]',
	                    algorithm: 'gzip',
	                    test: /\.(js|css|html|svg)$/i,
	                    threshold: 2048,
	                    minRatio: 0.8
	                })
	            ]
	        );
	    }
	}