Version

3.0.7

Reproduction link

https://segmentfault.com/a/1190000020102151

Steps to reproduce

It's a suggestion. I noticed that there are some global variables like __DEV__ or __FEATURE_PROD_DEVTOOLS__ etc, and many codes using them like this:

  deleteProperty(target, key) {
    if (__DEV__) {
      console.warn(
        `Delete operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    }
    return true
  }

These codes enlarge the bundle code size very much, but they are no use for production mode.

What is expected?

Maybe these code can be replaced by a kind of code conditional compilation(条件编译) in javascript, which means we just build these code in development mode, and drop these code in production mode.

By using js-conditional-compile-loader plugin, just need to change the code like this:

  deleteProperty(target, key) {
    /* IFTRUE_ISDEV*/
      console.warn(
        `Delete operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    /*FITRUE_ISDEV */
    return true
  }

What is actually happening?

By using conditional compilation, the code size for production mode will be much smaller.

In production mode, the result code is this:

  deleteProperty(target, key) {
    return true
  }

In delevelop mode, the result code is this:

  deleteProperty(target, key) {
      console.warn(
        `Delete operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    return true
  }

Usage of js-conditional-compile-loader in webpack:

const conditionalCompiler = {
    loader: 'js-conditional-compile-loader',
    options: {
        ISDEV: process.env.NODE_ENV === 'development',  // support directive: IFTRUE_ISDEV
        // other props
    }
}

module.exports = {
    // others...
    module: {
        rules: [
            {
                test: /\.js$/,   // can also be used for `ts`,`vue` files
                include: [resolve('src'), resolve('test')],
                use: [
                    //step-2
                    'babel-loader?cacheDirectory',
                    //step-1. Use js-conditional-compile-loader to change code before code importing
                    conditionalCompiler,
                ],
            },
            // others...
        ]
    }
}

For more info:
Implementation principle: https://segmentfault.com/a/1190000020102151
Github: https://github.com/hzsrc/js-conditional-compile-loader

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

This is just a feature requests, not a question. Please take a second to see the content .

These codes enlarge the bundle code size very much, but they are no use for production mode.

This is wrong, for the production build bundle, the DEV code will not be included