美文网首页
Umi.js 项目打包压缩方法

Umi.js 项目打包压缩方法

作者: Qingelin | 来源:发表于2022-04-09 21:21 被阅读0次

    umi.js 脚手架生成的项目打包两种方法:

    1. 官方打包方法:

    通过webpack打包:

    • 构建命令及产物
      $ yarn build    // 命令行构建
    
    umi-webpack.png
    tree ./dist   // 展示打包后的产物;只有静态的js 文件和图片文件
    
    umi-tree-dist.png
    • 本地验证:
      // 发布之前可以自己本地安装serve
    $ yarn global add serve
    
    $ serve ./dist   // 执行这一步之后会弹出两个地址,可预览项目
    

    2. 使用webpack 的两个插件进行压缩:

    • 安装第一个插件:使用插件去掉console
    $ npm i -D babel-plugin-transform-remove-console    // 去掉console
    
    removeConsole.png
    • 安装第二个插件:
    $ npm i -D compression-webpack-plugin   // 使用Gzip 压缩生产包
    
    1.png
    • 修改生产环境中配置文件config.js 或 config.prod.js(我项目中封装成不同组件)
     import { defineConfig } from 'umi'
    import CompressionPlugin from 'compression-webpack-plugin'
    
    const production = process.env.NODE_ENV === 'prod'
    
    export default defineConfig({
      // 打包时移除 console
      extraBabelPlugins: [production ? 'transform-remove-console' : ''],
      chainWebpack: function (config, { webpack }) {
        config.merge({
          optimization: {
            splitChunks: {
              chunks: 'all',
              minSize: 1000,
              minChunks: 2,
              automaticNameDelimiter: '.',
              cacheGroups: {
                vendor: {
                  name: 'vendors',
                  test({ resource }) {
                    return /[\\/]node_modules[\\/]/.test(resource)
                  },
                  priority: 10,
                },
              },
            },
          },
        })
        if (production) {
          // Gzip压缩
          config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
            {
              test: /\.(js|css|html)$/i, // 匹配
              threshold: 10240, // 超过10k的文件压缩
              deleteOriginalAssets: false, // 不删除源文件
            },
          ])
        }
      },
      // ...
    })
    
    • 本地验证操作和第一种方法一样。

    相关文章

      网友评论

          本文标题:Umi.js 项目打包压缩方法

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