轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack生產環境優化：tree shaking

• tree shaking: 去除無用代碼
  • 前提：
    • 1.必須使用ES6模塊化
    • 2.開啟production環境

1一、核心配置

```js
/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
*/

    // 生產環境下會自動壓縮js代碼，和啟用tree shaking
    mode: 'production',
};

二、驗證tree shaking是否生效

2.1、工程文件目錄

.
├── src
│   ├── css
│   │   ├── iconfont.css
│   │   ├── index.css
│   │   └── index.less
│   ├── imgs
│   │   ├── img.jpg
│   │   ├── img1.jpg
│   │   ├── img2.jpg
│   │   └── img3.jpg
│   ├── index.html
│   ├── js
│   │   ├── iconfont.js
│   │   ├── index.js          // 引入test.js文件的部分函數
│   │   └── test.js           // 使用ES6模塊化的js 文件
│   └── media
│       ├── iconfont.json
│       └── iconfont.ttf
└── webpack.config.js

2.1.1、test.js

//路徑：./src/js/test.js

export function mul(x, y) {
    return x * y;
}

export function count(x, y) {
    return x - y;
}

2.1.2、index.js

//入口文件
//路徑： ./src/js/indexjs

// 引入 test.js中的  mul 函數
import { mul } from './test';

// eslint-disable-next-line
console.log(mul(2, 3));

2.2、打包

> npx webpack

2.3、驗證方法

打開打包生成的js文件，分別查找 乘法和減法，其中乘法可以找到而減法找不到。

三、tree shaking 副作用

某些情況下 tree shaking 可能會誤刪除。
例如：在packlage.json中配置了sideEffects

{
  "name": "notes_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node_modules/.bin/webpack --config webpack.config.js",
    "start": "npx webpack-dev-server --config webpack.config.js --open Chrome.exe"
  },
  "keywords": [],
  "author": "eword <eword@eword.name> (http://www.eword.name/)",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-loader": "^8.3.0",
    "core-js": "^3.32.1",
    "css-loader": "^3.4.2",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.28.1",
    "file-loader": "^5.0.2",
    "find-cache-dir": "^5.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.5.2",
    "install": "^0.13.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.1.3",
    "uninstall": "0.0.0",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 9-12"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  },
  "sideEffects": false
}

核心配置

/所有代碼都沒有副作用（都可以進行tree shaking）

 "sideEffects": false

問題：可能會把css /@babel/polyfill 等文件干掉（副作用）。

解決方式

修改sideEffects配置

"sideEffects": ["*.css","*.less"]

通過配置css和less文件不會被tree shaking。