umi2项目打包优化

最新推荐文章于 2024-04-24 15:26:31 发布

滕笑然

最新推荐文章于 2024-04-24 15:26:31 发布

阅读量1k

点赞数 21

文章标签： webpack reactjs 前端 javascript

本文链接：https://blog.csdn.net/snake3344/article/details/135652257

版权

umi2项目打包优化

最近项目再部署的时候十分漫长，尤其是修复bug的时候，总感觉项目的部署很慢，需要五分钟，公司其他后台管理项目部署仅仅需要1分钟，于是我十分不爽，想要研究一下，这玩意到底是为什么那么卡？

自动化部署做了什么？

我们知道一般的自动化部署，通过git push 钩子触发jenkins的自动化部署事件，从而执行一系列命令

由于我们公司使用的是docker部署，那么流程就如下

docker pull 镜像并启动一个容器（耗时)
拉取项目源码

执行dockerfile

//以下为部分命令
FROM hub.xxx.com/library/nginx:stable-alpine
FROM hub.xxx.com/library/node:10@sha256:dac69681e3026f8a...
WORKDIR  /node
COPY package.json /node
COPY package-lock.json /node
RUN  --mount=type=cache,target=/node/node_modules,id=pri.. #设置缓存 以及根据环境配置一系列命令

下依赖可以指定镜像源（耗时)
打包 + 压缩（耗时)
发包（耗时)
配置nginx
结束

分析

我们通过分析上方做了什么，我们可以看到，耗时的主要是docker pull镜像，安装依赖，打包，压缩，发包等等

docker 和安装依赖的提速可以让docker使用内网或者国内网速较好的镜像

发包的优化就是将包压缩的足够小

这样我们仅仅剩下和打包，压缩，这三个都可以在前端项目开发时候进行调整

优化调整

首先，既然前端开发框架使用的是umi，我们就应该优先从 umijs2 进行查找

umi框架的优化

按需加载组件这个似乎是默认开启的
treeShaking 这个是不用说了，
disableCSSSourceMap 禁用css源码映射，这个也能提升一些速度
参考->.env和环境变量,具体的配置
1. ESLINT 通常我们会将这个开启，但是导致打包的时候也会执行，此时我们可以直接在packjson中将 ESLINT=1 写入运行命令中，而不是.env中
2. ANALYZE 分析bundle构成，线上部署要关闭集成了 webpack-bundle-analyzer
3. SPEED_MEASURE 线上须关闭耗时，其实是集成了 speed-measure-webpack-plugin
4. COMPRESS 默认压缩我没有使用这个我使用的另一种方案 happypack

多线程压缩

采用的是happypack, 配置了环境变量，方便进行修改

通常webpack的插件，如果umi没有公开其配置项的话，需要从chainWebpack中调整

压缩做好只使用一种方案，例如我使用了 happypack就不要使用env中的COMPRESS，否则可能耗时反增。

//config.js
  // "happypack": "^5.0.1",
import HappyPack from "happypack"
import os from 'os';
export default {
    chainWebpack(config) {
        if(process.env.HAPPYPACK ){
            const cpuCount = os.cpus().length; // 获取 CPU 核心数
            console.log("cpuCount",cpuCount)
            config.plugin('happypack').use(HappyPack, [
                {
                id: 'js',
                // 根据 CPU 核心数设置线程池大小
                threads: cpuCount,
                // 需要并行处理的 loader
                loaders: ['babel-loader'],
          },
          ]);
          }
}
}

添加缓存

如果线上是docker部署的，那么线上打包部署就不能够使用缓存，所以我只在本地开发环境重配置了缓存，相当于使用mfsu

//config.js   
//添加缓存
import HardSourceWebpackPlugin from "hard-source-webpack-plugin"
chainWebpack(config) {
  if(process.env.cacheHardSource && ["dev","feature1dev"].includes(process.env.BUILD_ENV ) ){
      config.plugin('HardSourceWebpackPlugin').use(HardSourceWebpackPlugin);
    }
}

关闭进度条

可以进行配置，当线上打包时，关闭滚动条，我可以提升30s左右

 config.plugins.delete('progress')

提出公共组件

如果使用treesharking，就不要使用这个，会有冲突，导致包更大

源码展示

//.env

BROWSER=none
HAPPYPACK=true ;开启多线程
; COMPRESS=none;不压缩似乎能提高速度，不压缩能提高大概20s
cacheHardSource=1 ;本地开发使用缓存
PROGRESS=none ;线上删除进度条
; SPEED_MEASURE=CONSOLE ;耗时输出到控制台
; ANALYZE=true ;开启可视化分析 线上须关闭！！

//config.js
// "happypack": "^5.0.1",
import HappyPack from "happypack"
import os from 'os';
const isDev = process.env.cacheHardSource && ["dev","feature1dev"].includes(process.env.BUILD_ENV)
export default {
    treeSharking:true,
    disableCSSSourceMap:process.env.BUILD_ENV === 'pro' ,//线上禁用源码
    chainWebpack(config) {
    //本地开发环境
    if(isDev){
      //添加缓存，实现了过程中提高编译速度
      config.plugin('HardSourceWebpackPlugin').use(HardSourceWebpackPlugin);
      // 删除进度条插件
    }else{
      // 删除进度条插件
      if(process.env.PROGRESS !== 'none'){
        config.plugins.delete('progress')
      }
    }

    // 使用 HappyPack 插件进行多线程构建
    if(process.env.HAPPYPACK){
      const cpuCount = os.cpus().length; // 获取 CPU 核心数
      console.log("cpuCount",cpuCount)
      config.plugin('happypack').use(HappyPack, [
        {
          id: 'js',
          // 根据 CPU 核心数设置线程池大小
          threads: cpuCount,
          // 需要并行处理的 loader
          loaders: ['babel-loader?cacheDirectory=true'],
        },
      ]);
    }
}
}