webpack优化之optimization.nodeEnv

1、前言：我们知道，在几乎所有框架中都有许多开发环境的代码检查和警告类型的代码，而这些代码在生产环境不是必须的。但是打包的时候会将这些代码保留下来，增加了打包的尺寸。

例如vue源码

// vue/dist/vue.runtime.esm.js
// …
if (process.env.NODE_ENV !== 'production') {
  warn('props must be strings when using array syntax.');
}
// …

2、消除检查警告代码

在webpack4中，通过设置optimization.nodeEnv="production"来移除这些代码

// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    nodeEnv: 'production',
    minimize: true,
  },
};

在webpack3或以下可以通过DefinePlugin插件实现

// webpack.config.js (for webpack 3)
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
    }),
    new webpack.optimize.UglifyJsPlugin(),
  ],
};

这两者的工作方式一样，在打包时将代码中的process.env.NODE_ENV替换成对应设置的值，如下

 // vue/dist/vue.runtime.esm.js
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
} else if (process.env.NODE_ENV !== 'production') {
  warn('props must be strings when using array syntax.');
}

//替换后如下
// vue/dist/vue.runtime.esm.js
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
} else if ("production" !== 'production') {
  warn('props must be strings when using array syntax.');
}

然后代码压缩插件会移除if分支里为false的代码，则上面的代码最终如下

// vue/dist/vue.runtime.esm.js (without minification)
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
}