——>

这里单独提一下tree-shaking,是因为这里有个坑。tree-shaking的主要作用是用来清除代码中无用的部分。目前在webpack4 我们设置modeproduction的时候已经自动开启了tree-shaking。但是要想使其生效,生成的代码必须是ES6模块。不能使用其它类型的模块如CommonJS之流。如果使用Babel的话,这里有一个小问题,因为Babel的预案(preset)默认会将任何模块类型都转译成CommonJS类型。修正这个问题也很简单,在.babelrc文件或在webpack.config.js文件中设置modules: false就好了

  1. // .babelrc
  2. {
  3. "presets": [
  4. ["@babel/preset-env",
  5. {
  6. "modules": false
  7. }
  8. ]
  9. ]
  10. }
  1. // webpack.config.js
  2. module: {
  3. rules: [
  4. {
  5. test: /\.js$/,
  6. use: {
  7. loader: 'babel-loader',
  8. options: {
  9. presets: ['@babel/preset-env', { modules: false }]
  10. }
  11. },
  12. exclude: /(node_modules)/
  13. }
  14. ]
  15. }

弊端

—-> 链接