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

2

目录

上节: source-map

上节目录如下:

clipboard.png

概念

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

注意事项

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

clipboard.png

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

修改package.json的sideEffects属性:

// 省略

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

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


//省略

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

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


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...