webpack生产环境优化：tree shaking

转载请注明 来源: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。