【避坑指“难”】umi3分包优化，提升首屏加载时间

最新推荐文章于 2024-07-18 16:40:00 发布

椰卤工程师

最新推荐文章于 2024-07-18 16:40:00 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/weixin_42224055/article/details/124944401

版权

本文详细介绍了如何通过Webpack的splitChunks优化模块将大体积包拆分为小包，以减少首屏加载时间和请求时间。同时，文章还展示了如何在Umi.js配置中启用compression-webpack-plugin以实现服务端Gzip压缩，进一步提高前端应用的加载速度。配置包括设置chunks以确保umi.js的引入，并在生产环境中启用Gzip压缩。

摘要由CSDN通过智能技术生成

在这里插入图片描述
提升首屏加载时间原理：把大体积的包，分成多个小体积的包进行加载，减少请求时间

chainWebpack配置

在 umi.js 或者 umi.ts 或者 .umirc.js 或者 config.js 中配置，使用 webpack 的优化模块optimization.splitChunks实现。

chunks配置

chunks 配置需要加上 umi，否则打包完后依旧是白屏，在控制台可看到 umi.js 和 umi.css 并没有引入。

compression-webpack-plugin服务端使用gzip进行压缩

打开 config/config.ts 文件(如果是 umi2 的项目则是 .umirc.js)

import {
    defineConfig } from 'umi';
import {
    join } from 'path';

import defaultSettings from './defaultSettings';
import proxy from './proxy';
import routers from './routes';

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const prodGzipList = ['js', 'css'];

const {
    REACT_APP_ENV } = process.env;
export default defineConfig({
   
  hash: true,
  history: {
    type: 'hash' },
  publicPath: './',
  antd: {
   },
  dva: {
   
    hmr: true,
  },
  layout: {
   
    // https://umijs.org/zh-CN/plugins/plugin-layout
    locale: true,
    siderWidth: 208,
    ...defaultSettings,