webpack之tree shaking

印度阿三17 2020-03-19

展開全文

什么是tree-shaking？

前端中的tree-shaking可以理解為通過工具"搖"我們的js文件，將其中用不到的代碼"搖"掉，是一個性能優(yōu)化的范疇。具體來說，在webpack項目中，
有一個入口文件，相當(dāng)于一棵樹的主干，入口文件有很多依賴的模塊，相當(dāng)于樹枝。實際情況中，雖然依賴?yán)材硞€模塊，但其實只使用其中的某些功能。通過
tree-shaking，將沒有使用的模塊搖掉，這樣來達(dá)到刪除無用代碼的目的。

tree-shaking原理

tree-shaking原理，簡單來說

tree shaking的本質(zhì)是消除無用的Javascript代碼
因為ES6模塊的出現(xiàn)，ES6模塊依賴關(guān)系是確定的，和運行時的狀態(tài)無關(guān)，可以進(jìn)行可靠的靜態(tài)分析

怎么使用tree-shaking？

在webpackDemo/demo下新建一個文件tree-shaking，文件目錄如下
index.js內(nèi)容如下

import {add} from "./math.js"
console.log(mathFn)
function component(){
    var element = document.createElement("pre");
    element.innerHTML = [
        "hello webpack",
        "5 cubed is equal to "   add(5,6)
    ].join("\n\n");
    return element;
}
document.body.appendChild(component())

math.js內(nèi)容如下

export function add(a,b){
    console.log("add");
    return a b;
}

export function minus(a,b){
    console.log("minus")
    return a-b
}

export function multiply(a,b){
    console.log("mutiply");
    return a*b;
}

export function divide(a,b){
    console.log("divide");
    return a/b;
}

tree-shaking.js內(nèi)容如下

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const webpack = require("webpack");
module.exports = {
    mode:"development",
    entry:path.resolve(__dirname,"src/index.js"),
    module:{
        rules:[
            {
                test:/\.m?js$/,
                exclude:/(node_modules|bower_components)/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/preset-env"],
                        plugins:[
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                }
            }
        ]
    },
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,"dist")
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(),
//      new webpack.NamedModulesPlugin(),
//      new webpack.HotModuleReplacementPlugin()
    ],
    devtool:"inline-source-map",
//  devServer:{
//      contentBase:"./dist",
//      hot:true,
//      inline:true
//  }
}

package.json 內(nèi)容如下

{
  "name": "webpackDevServer",
  "sideEffects": false,
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config demo/webpack-dev-server/webpack-dev-server.js",
    "server": "node demo/webpack-dev-middleware/server.js",
    "hmr": "webpack-dev-server  --config demo/HMR/webpack.hmr.js",
    "treeShaking:dev": "webpack-dev-server --config demo/tree-shaking/tree-shaking.js",
    "treeShaking:build": "webpack  --config demo/tree-shaking/tree-shaking.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "7.6.4",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "8.0.6",
    "clean-webpack-plugin": "3.0.0",
    "css-loader": "3.2.0",
    "express": "4.17.1",
    "html-webpack-plugin": "3.2.0",
    "style-loader": "1.0.0",
    "webpack": "4.41.2",
    "webpack-cli": "3.3.9",
    "webpack-dev-middleware": "3.7.2",
    "webpack-dev-server": "3.8.2"
  }
}