webpack4.29.x成神之路（十三） 搖樹優化(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就不會誤刪代碼了。

下節：區分開發和生產環境