美文网首页
umi打包太大,进行压缩处理

umi打包太大,进行压缩处理

作者: 夏夏夏夏顿天 | 来源:发表于2021-05-06 15:54 被阅读0次

umi打包的时候,太大进行压缩处理

关键插件和umi版本:

"umi": "^3.2.24",
 "compression-webpack-plugin": "^6.0.0",

在.umirc.ts文件添加

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
    exclude: [],
  },
  .....
  dynamicImport: {},
  chunks: ['vendors', 'umi'],
  chainWebpack: function (config, { webpack }) {
    config.merge({
      optimization: {
        splitChunks: {
          chunks: 'all',
          automaticNameDelimiter: '.',
          name: true,
          minSize: 30000,
          minChunks: 1,
          cacheGroups: {
            vendors: {
              name: 'vendors',
              chunks: 'all',
              test: /[\\/]node_modules[\\/]/,
              priority: -12,
            },
          },
        },
      },
    });
    if (process.env.NODE_ENV === 'production') {
      //gzip压缩
      config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
        {
          test: /\.js$|\.html$|\.css$/, //匹配文件名
          threshold: 10240, //对超过10k的数据压缩
          deleteOriginalAssets: false, //不删除源文件
        },
      ]);
    }
  },
  theme: {},
 .......
});

nginx配置支持请求压缩内容

在nginx配置文件内添加

 # 开启和关闭gzip模式
gzip on;

# gizp压缩起点,文件大于1k才进行压缩
gzip_min_length 1k;

# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 6;

# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/xml text/javascript application/json;

# nginx对于静态文件的处理模块,开启后会寻找以.gz结尾的文件,直接返回,不会占用cpu进行压缩
gzip_static on;

# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;

# 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区
gzip_buffers 4 16k;

相关文章

  • umi打包太大,进行压缩处理

    umi打包的时候,太大进行压缩处理 关键插件和umi版本: 在.umirc.ts文件添加 nginx配置支持请求压...

  • webpack 入门

    webpack 是什么? webpack是模块化管理工具,使用webpack可以对模块进行压缩、预处理、按需打包、...

  • webpack 入门

    webpack 是什么? webpack是模块化管理工具,使用webpack可以对模块进行压缩、预处理、按需打包、...

  • Linux命令(6)

    打包压缩与搜索命令 tar 对文件进行打包压缩或者解压命令,格式为tar[选项][文件]-c ...

  • 01-webpack核心基础-webpack简介与使用

    一、webpack介绍 1、由来 由于前端之前js、css、图片文件需要单独进行压缩和打包,这样团队人员处理很繁琐...

  • Umi.js 项目打包压缩方法

    umi.js 脚手架生成的项目打包两种方法: 1. 官方打包方法: 通过webpack打包: 构建命令及产物 本地...

  • shell命令整理(七)

    打包压缩 window打包压缩工具: linux打包压缩工具: 打包 解包 案例 压缩 解压缩 案例 打包压缩一起...

  • webpack压缩js代码时报错:Unexpected toke

    最近想对代码进行压缩,于是使用: 对代码进行压缩,结果打包时报错:RROR in ... from UglifyJ...

  • Linux常用命令(二)

    文件归档、打包压缩命令:rar 缺省仅仅打包归档,不进行文件压缩 常用选项参数: "-c"创建归档文件包 "-x"...

  • 新手必须掌握的Linux命令---打包压缩与搜索命令

    [TOC] 新手必须掌握的Linux命令---打包压缩与搜索命令 在Linux系统中对文件进行打包压缩与解压,以及...

网友评论

      本文标题:umi打包太大,进行压缩处理

      本文链接:https://www.haomeiwen.com/subject/ogjddltx.html