React项目引用antd，优化之项目大小缩减5倍的配置方案(gzip福利)

react 项目根目录新建config-overrides.js 并写如下代码,require引入的包可以使用yarn add 安装

const { override, fixBabelImports, addWebpackPlugin } = require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
const { StatsWriterPlugin }  = require("webpack-stats-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i; //gzip 压缩正则匹配

// module.exports = function override(config, env) {

// // do stuff with the webpack config...

// return config;

// };

const CompressionWebpackPlugin = require('compression-webpack-plugin'); //这是gzip压缩插件，本地压缩后到线上访问很快

// module.exports = function override(config, env) {
//     // do stuff with the webpack config...
//     return config;
//   };
let startTime = Date.now();
if(process.env.NODE_ENV === 'production') process.env.GENERATE_SOURCEMAP = "false";
// 自定义生产环境配置
const productionConfig = (config) =>{
  if(config.mode === 'production'){
      config.plugins.push(...[
          new StatsWriterPlugin({
              fields: null,
              transform: (data) => {
                let endTime = Date.now()
                data = {
                  Time: (endTime - startTime)/1000 + 's'
                }
                return JSON.stringify(data, null, 2);
              }
          }),
          new BundleAnalyzerPlugin()
      ])
  }
  return config
}

// 打包配置

const compressGzip = config => {

if (config.mode === 'production') {

// 添加js打包gzip配置

config.plugins.push(

new CompressionWebpackPlugin({

algorithm: 'gzip',

test: productionGzipExtensions,

threshold: 0,

minRatio: 0.8,

deleteOriginalAssets: false

}),

)

}

return config;

}

module.exports = override(
  productionConfig,
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),

　　compressGzip,

  addWebpackPlugin(new AntdDayjsWebpackPlugin())
);

React项目引用antd，优化之项目大小缩减5倍的配置方案(gzip福利)

相关推荐