首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React App没有缩小,尽管我使用了minify和uglify插件

React App没有缩小,尽管我使用了minify和uglify插件
EN

Stack Overflow用户
提问于 2019-12-10 19:57:29
回答 1查看 442关注 0票数 0

我有一个大问题,因为我的reactjs应用程序在生产中超过1.8MB。

我需要减小这个尺寸。

这是我的webpack分析器的结果:

这是我的webpack.config.js:

代码语言:javascript
运行
复制
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MinifyPlugin = require('babel-minify-webpack-plugin');

const CopyWebpackPlugin = require('copy-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const lessToJS = require('less-vars-to-js');
const fs = require('fs');

const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8')
);

module.exports = (env = {}) => {
  const config = {
    entry: ['./src/main.less', './src/polyfill.js', './src/main.jsx'],
    output: {
      path: path.resolve(__dirname, `./html/${env.branch || 'master'}`),
      filename: 'kt-reactapp.js',
      library: 'ktReactApp',
      libraryExport: 'default',
      libraryTarget: 'umd',
    },
    mode: env.mode || 'development',
    devtool: false,
    resolve: {
      extensions: ['.js', '.jsx', '.css', '.sass', '.scss', '.less'],
    },
    plugins: [
      new CopyWebpackPlugin([
        { from: 'dev/static/', to: 'static/' },
        'dev/index.html',
      ]),
      new MinifyPlugin(),
    ],
    module: {
      rules: [
        {
          test: [/\.js$/, /\.jsx$/],
          exclude: /node_modules/,
          use: 'babel-loader',
        },
        {
          test: /\.css$/i,
          use: [
            {
              loader: 'style-loader',
            },
            {
              loader: 'css-loader',
            },
          ],
        },
        {
          test: /\.less$/i,
          use: [
            {
              loader: 'style-loader', // creates style nodes from JS strings
            },
            {
              loader: 'css-loader', // translates CSS into CommonJS
              options: {
                sourceMap: env === 'development',
                import: false,
              },
            },
            {
              loader: 'less-loader', // compiles Less to CSS
              options: {
                sourceMap: env === 'development',
                javascriptEnabled: true,
                outputStyle: env === 'production' ? 'compressed' : 'nested',
                modifyVars: themeVariables,
              },
            },
          ],
        },
        {
          test: /\.(jpe?g|png|gif)$/i,
          use: [
            {
              loader: 'image-webpack-loader',
              options: {
                gifsicle: {
                  interlaced: false,
                },
                optipng: {
                  optimizationLevel: 7,
                },
              },
            },
            {
              loader: 'file-loader',
            },
          ],
        },
        {
          test: /\.(svg)$/i,
          use: [
            {
              loader: 'file-loader',
            },
          ],
        },
        {
          test: /\.(woff(2)?|ttf|eot|otf|svg)(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: 'fonts/',
              },
            },
          ],
        },
      ],
    },
    watchOptions: {
      poll: 2000,
      ignored: ['/node_modules/'],
    },
    optimization: {
      minimizer: [new UglifyJsPlugin()],
    },
    devServer: {
      contentBase: path.resolve(__dirname, './dev/'),
      watchContentBase: true,
      disableHostCheck: true,
      host: '127.0.0.1',
      port: 8000,
      // public: process.env.webpack_public_address || null,
      overlay: true,
    },
  };


  if (env.mode === 'development') {
    config.entry.unshift(
      'webpack/hot/only-dev-server',
      'react-hot-loader/patch'
    );
    config.resolve.alias = { 'react-dom': '@hot-loader/react-dom' };
    config.module.rules.unshift({
      enforce: 'pre',
      test: [/\.js$/, /\.jsx$/],
      exclude: /node_modules/,
      loader: 'eslint-loader',
      options: {
        failOnError: env.mode === 'production',
      },
    });
  }

  if (env.analyze === 'true') {
    config.plugins.push(
      new BundleAnalyzerPlugin({
        analyzerMode: 'static',
      })
    );
  }

  return config;
};

我使用yarn build开始生产构建,如果我想分析,那么yarn build:analyze

脚本(package.json)如下所示:

代码语言:javascript
运行
复制
  "scripts": {
    "dev": "webpack-dev-server --hot --env.mode=development",
    "build": "webpack --colors --profile --progress --env.mode=production",
    "build:analyze": "webpack --colors --profile --progress --env.mode=production --env.analyze=true",
    "lint": "eslint ./src/ --ext .js,.jsx"
  }

我已经读过关于webpack的文章,认为UglifyJsPlugin和MinifyPlugin会有很大帮助。

这里谁能帮上忙?

EN

Stack Overflow用户

发布于 2019-12-10 21:36:33

我认为这是因为您使用的是--env.mode而不是--mode (docs)

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59266689

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档