vuecli4打包优化(Marksheng）

浅浅的花香味﹌ 2022-12-27 04:41 352阅读 0赞

### 一、去除生产环境sourceMap ###

sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间

module.exports = {
      // 根据你的实际情况更改这里
      publicPath,
      assetsDir: 'assets',
      lintOnSave: true,
      productionSourceMap: false,
    }

### 二、对资源文件进行压缩 ###

需要下载 [compression-webpack-plugin][]

cnpm i compression-webpack-plugin -D

const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
    module.exports = {
      // 根据你的实际情况更改这里
      publicPath,
      assetsDir: 'assets',
      lintOnSave: true,
      configureWebpack: {
        plugins:[
          new CompressionWebpackPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            // test: /\.js$|\.html$|\.json$|\.css/,
            test: /\.js$|\.json$|\.css/,
            threshold: 10240, // 只有大小大于该值的资源会被处理
            minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
            // deleteOriginalAssets: true // 删除原文件
          })
        ],
      },
    }

压缩后也会节省一部分空间，单后端要对nginx修改，配合前端

nginx配置示例：

location ~ .*\.(js|json|css)$ {
        gzip on;
        gzip_static on; # gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。
        gzip_min_length 1k;
        gzip_http_version 1.1;
        gzip_comp_level 9;
        gzip_types  text/css application/javascript application/json;
        root /dist;
    }

> nginx需要安装http\_gzip\_static\_module以支持gzip\_static

### 三、图片压缩 ###

需要下载 [image-webpack-loader][]

module.exports = {
      // 根据你的实际情况更改这里
      publicPath,
      assetsDir: 'assets',
      lintOnSave: true,
      // image
      config.module
        .rule('images')
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true
        })
        .end()
    }

### 四、去除console.log打印 ###

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    new UglifyJsPlugin({
        uglifyOptions: {
            output: {
                comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
                drop_console: true,
                drop_debugger: false,
                pure_funcs: ['console.log'] //移除console
            }
        }
    })

*  1
 *  2
 *

### 五、只打包改变的文件 ###

const { HashedModuleIdsPlugin } = require('webpack');
    configureWebpack: config => {    
        const plugins = [];
        plugins.push(
            new HashedModuleIdsPlugin()
        )
    }

### 六、开启分析打包日志 ###

安装`cnpm i webpack-bundle-analyzer -D`

chainWebpack: config => {
        config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }

### 七、完整配置 ###

vue.config.js完整配置

[compression-webpack-plugin]: https://blog.csdn.net/weixin_43638968/article/details/109093199
[image-webpack-loader]: https://www.npmjs.com/package/image-webpack-loader