zoukankan      html  css  js  c++  java
  • umijs 开发优化和生产优化

    .umirc.ts

    import { defineConfig } from 'umi';
    
    import dev from './config/dev';
    import prod from './config/prod';
    
    console.log(process.env.NODE_ENV);
    const envConfig = 'development' === process.env.NODE_ENV ? dev : prod;
    
    export default defineConfig({
      webpack5: {}, // 使用webpack 5
      nodeModulesTransform: {
        type: 'none',
      },
      routes: [{ path: '/', component: '@/pages/index' }],
      fastRefresh: {},
      ...envConfig,
    });
    

    config/dev

    开发时使用 chunk,cache和esbuild-loader 减少打包时间

    esbuild-loader 不支持 typescript 的 emitDecoratorMetadata, 如果你需要 emitDecoratorMetadata 可以将 esbuild-loader 换成 swc

    import { defineConfig } from 'umi';
    
    export default defineConfig({
      hash: false,
      devServer: {
        // writeToDisk: true,
      },
      chunks: ['vendors', 'umi'],
      chainWebpack: function (config, { webpack }) {
        config.merge({
          // https://webpack.js.org/configuration/cache/
          cache: {
            type: 'filesystem',
          },
          optimization: {
            moduleIds: 'deterministic',
            splitChunks: {
              cacheGroups: {
                vendor: {
                  test: /[\/]node_modules[\/]/,
                  name: 'vendors',
                  chunks: 'all',
                },
              },
            },
          },
          module: {
            rules: [
              {
                test: /.tsx?$/,
                loader: 'esbuild-loader',
                options: {
                  loader: 'tsx',
                  target: 'esnext',
                },
              },
            ],
          },
        });
      },
    });
    

    config/prod

    打包生产时 能用cdn的就用cdn

    import { defineConfig } from 'umi';
    import * as pkg from '../package.json';
    
    const externalsConfig: any = {
      lodash: {
        name: '_',
        cdn: (version: string) =>
          `https://cdnjs.cloudflare.com/ajax/libs/react/${version}/umd/react.production.min.js`,
      },
      react: {
        name: 'React',
        cdn: (version: string) =>
          `https://cdnjs.cloudflare.com/ajax/libs/react-dom/${version}/umd/react-dom.production.min.js`,
      },
      'react-dom': {
        name: 'ReactDOM',
        cdn: (version: string) =>
          `https://cdnjs.cloudflare.com/ajax/libs/lodash.js/${version}/lodash.min.js`,
      },
    };
    
    const externals: any = {};
    const scripts: string[] = [];
    for (const pname in externalsConfig) {
      externals[pname] = externalsConfig[pname].name;
      if (pname in pkg.dependencies) {
        const version = (pkg.dependencies as any)[pname].replace(/^D/, '');
        scripts.push(externalsConfig[pname].cdn(version));
      }
    }
    
    export default defineConfig({
      hash: true,
      chainWebpack: function (config, { webpack }) {
        config.merge({
          optimization: {
            minimize: true,
            usedExports: true,
          },
        });
      },
      externals,
      scripts,
    });
    
  • 相关阅读:
    Tomcat 配置 项目 到tomcat目录外面 和 域名绑定访问(api接口、前端网站、后台管理网站)
    弹窗插件zDialog使用教程
    shiro+spring相关配置
    jQuery分页插件(jquery.page.js)的使用
    ueditor1.4.3配置过程(包含单独上传文件以及图片的使用),ueditor1.4.3上传配置(转 http://www.bkjia.com/webzh/1001016.html)
    ueditor1_4_3_3编辑器修改文章
    jquery获取当前select下拉选的属性值
    js点击标签时获取当前标签属性值
    mysql给root开启远程访问权限,修改root密码
    redis持久化配置
  • 原文地址:https://www.cnblogs.com/ajanuw/p/15031752.html
Copyright © 2011-2022 走看看