umi 3.X 优化build文件目录

最新推荐文章于 2024-10-12 14:27:54 发布

原创最新推荐文章于 2024-10-12 14:27:54 发布 · 856 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

文章详细描述了如何优化UMIbuild的配置，包括修改CSS、JS和图片输出目录，以及调整静态文件资源的引入路径，以确保编译后的应用能正确加载资源并提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

优化前 umi build

在这里插入图片描述

优化后效果立马拉满对不

在这里插入图片描述

解决方案如下

 // 修改css输出目录
    config.plugin('extract-css').tap(() => [
      {
        filename: `${staticDir}/css/[name].[contenthash:8].css`,
        chunkFilename: `${staticDir}/css/[name].[contenthash:8].chunk.css`,
        ignoreOrder: true
      }
    ]);
   // 修改js输出目录
    config.output.filename(`${staticDir}/js/[name].[hash:8].js`).chunkFilename(`${staticDir}/js/[name].[contenthash:8].chunk.js`);
   // 修改图片输出目录
    config.module
      .rule("images")
      .test(/\.(png|jpe?g|gif|webp|ico)(\?.*)?$/)
      .use("url-loader")
      .loader(require.resolve("url-loader"))
      .tap((options: { fallback: any; }) => {
        const newOptions = {
          ...options,
          name: staticDir + "/images/[name].[hash:8].[ext]",
          fallback: {
            ...options.fallback,
            options: {
              name: staticDir + "/images/[name].[hash:8].[ext]",
              esModule: false,
            },
          },
        };
        return newOptions;
      });

    config.module
      .rule("svg")
      .test(/\.(svg)(\?.*)?$/)
      .use("file-loader")
      .loader(require.resolve("file-loader"))
      .tap((options: any) => ({
        ...options,
        name: staticDir + "/images/[name].[hash:8].[ext]",
        esModule: false,
      }));

编译完成, 如果在项目中有引入一些静态文件资源, 记得修改引入的文件路径, 否则会找不到对于源文件而报错

 // 修改css文件资源文件访问路径
    config.module
      .rule('css')
      .oneOf('css')
      .use('extract-css-loader')
      .tap((options: any) => ({
        publicPath: '../../',
        hmr: false,
      }));
    config.module
      .rule('less')
      .oneOf('css')
      .use('extract-css-loader')
      .tap((options: any) => ({
        publicPath: '../../',
        hmr: false,
      }));
    config.module
      .rule('less')
      .oneOf('css-modules')
      .use('extract-css-loader')
      .tap((options: any) => ({
        publicPath: '../../',
        hmr: false,
      }));