webpack429x成神之路十三-摇树优化tree-shaking

目录

上节：source-map

上节目录如下：

概念

官方：描述移除 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, 一直翻到最后：

可以看到，虽然 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:

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

这两个方法还在，说明这次打包只是标记出了用到的方法，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:

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

注意事项

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

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

修改 package.json 的 sideEffects 属性：

// 省略

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

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


// 省略

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

下节：区分开发和生产环境（待更新）