webpack4.29.x成神之路（十三）摇树优化(tree shaking)

Macuroon

2019-11-19

关注关注

上节： source-map

上节目录如下：

webpack4.29.x成神之路（十三）摇树优化(tree shaking)

概念

官方：描述移除 JavaScript 上下文中的未引用代码。
也就是希望webpack在打包时把没用到的函数删掉，最常见的就算第三方函数库：lodash,date-fns等。

新建src/js/math.js：

export function add(...arg) {
  return arg.reduce((x, y) => x + y);
}

export function sub(...arg) {
  return arg.reduce((x, y) => x - y);
}

这里定义了两个函数，然后修改src/index.js:

import {add} from './js/math';

console.log(add(2, 4, 11));

修改webpack.config.js的mode选项，将production改为development：

// 省略
mode: 'development',
// 省略

这样打包后就不会压缩代码了
然后npm run build, 编辑器打开bundles/main.js,一直翻到最后：

webpack4.29.x成神之路（十三）摇树优化(tree shaking)

可以看到，虽然index.js里只用到了add方法，但webpack还是会把math.js中导出的方法都进行打包，那么tree shaking就是用来解决这个问题的。

开启tree shaking

在package.json里添加一个属性：
package.json:

// 省略
"sideEffects": false,
// 省略

sideEffects如果设为false，webpack就会认为所有没用到的函数都是没副作用的，即删了也没关系。

修改wbpack.config.js:

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'bundles')
  },

  // 开启devServer
  devServer: {},


  optimization: {
    // 优化导出的模块
    usedExports: true
  },

  module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

然后npm run build, 打包bundles/main.js:

webpack4.29.x成神之路（十三）摇树优化(tree shaking)

这个注释表明webpack已识别出哪些方法是真正被用到的，但是继续看111行：

webpack4.29.x成神之路（十三）摇树优化(tree shaking)

这两个方法还在，说明这次打包只是标记出了用到的方法，tree shaking的效果并未生效，这是因为刚才的打包模式是develpoment, 在mode === develpoment的情况下，因为需要source-map调试，如果删掉代码，source-map的标记位置就不准确了，所以得在production模式下才能试tree shaking。
修改webpack.config.js:

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'bundles')
  },

  // 开启devServer
  devServer: {},


  // optimization: {
  //   // production模式下默认开启
  //   usedExports: true
  // },

  module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

再次npm run build:

webpack4.29.x成神之路（十三）摇树优化(tree shaking)

代码被压缩了，我们可以ctrl + f搜索reduce 发现只有这个add方法，那个sub被去除了，这样tree shaking就生效了

注意事项

在实际的项目里，我们自己写的方法如果没用到，基本也不会有啥问题，但是第三方模块和样式就不好说了，比如在index.js中引入：

webpack4.29.x成神之路（十三）摇树优化(tree shaking)

这种全局引入的方式，webpack依然会视为没用到的模块而被tree shaking掉，这些代码就是所谓的，有副作用的代码，我们要禁止对他们tree shaking.

修改package.json的sideEffects属性：

// 省略

"sideEffects": [
    // 数组里列出黑名单，禁止shaking下列代码
    "@babel/polly-fill",
    "*.less",

    // 其它有副作用的模块
    "./src/some-side-effectful-file.js"
  ],


//省略

这样tree shaking就不会误删代码了。

下节：区分开发和生产环境

webpack