reactjs - Webpack treeshaking 不适用于 typescript 和 Babel7

Question

当我使用 javascript 进行 treeshaking 时，当我将模式设置为生产时它可以正常工作，但是当我切换到使用 typescript 和 babel 7 时，treeshaking 就不起作用。

我也尝试在 package.json 中设置 "sideEffects": false"

我设置的任何我的 babellrc ["@babel/preset-env", { "modules": false }],

我的 tsconfig

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "es6",
    "target": "esnext",
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "noEmit": true,
    "moduleResolution": "node",
    "rootDir": "src",
    "isolatedModules": true,
    "esModuleInterop": true
  },
  "include": [
    "src"
  ]
}

我的生产 webpack 配置。请注意，我将优化最小化设置为 false，以便不会最小化输出。我可以清楚地知道它不会摇树

module.exports = merge(common, {
  mode: 'production',

  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.(?:sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            },
          },
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),

    new OptimizeCssAssetsPlugin(),

    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true,
      },
    }),
  ],
  optimization: {
    minimize: false
  }
});

常见的 webpack 配置

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry:["@babel/polyfill", "./src/index.ts"],

  output: {
    path: path.resolve(__dirname, "dist")
  },

  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },

  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        enforce: 'pre',
        test: /\.(ts|js)x?$/,
        use: {
          loader: 'tslint-loader',
          options: {
            emitErrors: true,
            failOnHint: true
          }
        },
        exclude: /node_modules/
      },
      {
        enforce: "pre", test: /\.js$/, loader: "source-map-loader"
      },
      {
        test: /\.(eot|otf|ttf|woff|woff2)$/,
        use: 'file-loader'
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
              noquotes: true,
            },
          },
        ],
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                enabled: false,
                // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
                // Try enabling it in your environment by switching the config to:
                // enabled: true,
                // progressive: true,
              },
              gifsicle: {
                interlaced: false,
              },
              optipng: {
                optimizationLevel: 7,
              },
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
            },
          }
        ]
      }
    ]
  },

  plugins: [
      new CleanWebpackPlugin(['dist'], {
        root: path.join(__dirname)
      }),
  ]
}

标签： reactjstypescriptwebpackbabeljswebpack-4