{"id":19204529,"url":"https://github.com/hyy1115/webpack-tree-shaking","last_synced_at":"2025-05-12T15:46:22.820Z","repository":{"id":135093248,"uuid":"116638390","full_name":"hyy1115/webpack-tree-shaking","owner":"hyy1115","description":"babel7结合webpack3 tree-shaking对打包后代码的影响","archived":false,"fork":false,"pushed_at":"2018-01-08T06:50:14.000Z","size":7,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T14:42:53.448Z","etag":null,"topics":["babel","react","tree-shaking","webpack","webpack3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hyy1115.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-01-08T06:24:54.000Z","updated_at":"2023-03-10T09:06:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"cf30985a-9a6e-4430-85f4-2b9864a19fce","html_url":"https://github.com/hyy1115/webpack-tree-shaking","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyy1115%2Fwebpack-tree-shaking","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyy1115%2Fwebpack-tree-shaking/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyy1115%2Fwebpack-tree-shaking/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyy1115%2Fwebpack-tree-shaking/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyy1115","download_url":"https://codeload.github.com/hyy1115/webpack-tree-shaking/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253767726,"owners_count":21961166,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","react","tree-shaking","webpack","webpack3"],"created_at":"2024-11-09T13:08:36.758Z","updated_at":"2025-05-12T15:46:22.807Z","avatar_url":"https://github.com/hyy1115.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-tree-shaking\n\n### 目的\n\n本文将会介绍下面几个部分的内容：\n\n1、babel7结合webpack3的用法\n\n2、tree-shaking对于普通js函数的影响\n\n3、tree-shaking对于react组件的影响\n\n### 相关技术\n这里我们将使用babel7，也是目前最新的版本，你会看到不再需要babel-preset-es2015这些东西了。所有的babel插件都改成@babel/xxx的形式。\n\nbabel-loader也必须使用8+版本。\n\nwebpack版本必须3+。\n\nreact和react-dom均采用16+。\n```json\n\"devDependencies\": {\n    \"@babel/core\": \"^7.0.0-beta.36\",\n    \"@babel/preset-env\": \"^7.0.0-beta.36\",\n    \"@babel/preset-react\": \"^7.0.0-beta.36\",\n    \"babel-loader\": \"^8.0.0-beta.0\",\n    \"uglifyjs-webpack-plugin\": \"^1.1.6\",\n    \"webpack\": \"^3.10.0\"\n  },\n  \"dependencies\": {\n    \"react\": \"^16.2.0\",\n    \"react-dom\": \"^16.2.0\"\n  }\n```\n\n### 配置公共开发环境\n\n安装好上面的插件之后，需要配置几个公共文件。\n\n#### 1、.babelrc\n\nbabel8的写法是下面这种，需要注意了，别用以前的写法了。\n```json\n{\n  \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"],\n  \"env\": {\n    \"production\": {\n      \"presets\": [\"react-optimize\"]\n    }\n  }\n}\n```\n\n#### 2、.eslint\n很简单的配置，可以不关注\n```json\n{\n\t\"env\": {\n\t\t\"browser\": true,\n        \"es6\": true\n\t},\n\t\"parserOptions\": {\n\t\t\"sourceType\": \"module\"\n\t},\n\t\"rules\": {\n\t\t\"keyword-spacing\": 0,\n\t\t\"node/no-unsupported-features\": 0\n\t}\n}\n```\n#### 3、webpack.config.js\n\nwebpack配置了2个对象，打包后的app.js和shaking.js分别用来测试普通函数和React组件对于tree-shaking的支持。\n\n```javascript\nconst path = require('path');\nconst webpack = require('webpack');\n//压缩js的插件\nconst UglifyJSPlugin = require('uglifyjs-webpack-plugin');\n\n//入口文件和输出文件的路径\nconst PATHS = {\n  app: path.join(__dirname, 'app', 'entry'), //react入口文件\n  build: path.join(__dirname, 'build'), //输出文件\n  shaking: path.join(__dirname, 'app', 'shaking') //普通函数入口文件\n};\n\nmodule.exports = [\n    //react打包配置\n    {\n        entry: {\n            vendor: ['react', 'react-dom'],\n            app: PATHS.app,\n        },\n        output: {\n            path: path.join(PATHS.build),\n            filename: '[name].js',\n        },\n        plugins: [\n            new webpack.optimize.CommonsChunkPlugin({\n                name: 'vendor'\n            }),\n            new UglifyJSPlugin()\n        ],\n        module: {\n            rules: [{\n                test: /\\.js$/,\n                use: {\n                    loader: 'babel-loader'\n                },\n                exclude: /node_modules/\n            }]\n        }\n    },\n    //普通函数打包配置\n    {\n        entry: {\n            shaking: PATHS.shaking,\n        },\n        output: {\n            path: path.join(PATHS.build),\n            filename: '[name].js',\n        },\n        plugins: [\n            new UglifyJSPlugin()\n        ]\n    }\n];\n\n```\n### 主文件\n\n#### 1、主文件位于app目录下面。\n\n#### 2、有2个入口文件，分别是entry.js和shaking.js\n\n```javascript\n//entry.js\nimport React from 'react'\nimport { ReactDOm } from 'react-dom'\nimport App from './App'\n\nReactDOM.render(\n    App,\n    document.getElementById('root')\n);\n```\n```javascript\n//shaking.js\n//这是来自webpack官方例子\nimport { square } from './lib/utils.js';\n\nfunction component() {\n    var element = document.createElement('pre');\n    \n    element.innerHTML = [\n        'Hello webpack!',\n        '5 cubed is equal to ' + square(10)\n    ].join('\\n\\n');\n    \n    return element;\n}\n\ndocument.body.appendChild(component());\n```\n#### 3、App.js\n\nreact组件顶层容器\n```javascript\nimport React from 'react'\nimport A from './components/A'\n\nconst App = () =\u003e {\n    return \u003cA /\u003e\n}\nexport default App\n```\n#### 4、components文件夹\n\nreact子组件\n```javascript\nimport React from 'react'\nimport { square } from '../lib/utils'\n\nconst A = () =\u003e {\n    return (\n        \u003cdiv\u003e\n            测试tree shaking的效果 {square(10)}\n        \u003c/div\u003e\n    )\n}\n```\n#### 5、lib文件夹\n\nexport模块导出函数\n```javascript\nexport function square(x) {\n    return x * x;\n}\n\nexport function cube(x) {\n    return x * x * x;\n}\n```\n\n### 打包测试tree-shaking\n\n#### 1、普通函数打包结果\n\n下面的代码你前面全都可以忽略，只需要看函数的末尾，可以看到函数最末尾只打包了square方法，没有使用到的cube方法成功被干掉了，这说明tree-shaking生效。\n```javascript\n!function(e) {\n    var n = {};\n    function t(r) {\n        if (n[r])\n            return n[r].exports;\n        var o = n[r] = {\n            i: r,\n            l: !1,\n            exports: {}\n        };\n        return e[r].call(o.exports, o, o.exports, t),\n        o.l = !0,\n        o.exports\n    }\n    t.m = e,\n    t.c = n,\n    t.d = function(e, n, r) {\n        t.o(e, n) || Object.defineProperty(e, n, {\n            configurable: !1,\n            enumerable: !0,\n            get: r\n        })\n    }\n    ,\n    t.n = function(e) {\n        var n = e \u0026\u0026 e.__esModule ? function() {\n            return e.default\n        }\n        : function() {\n            return e\n        }\n        ;\n        return t.d(n, \"a\", n),\n        n\n    }\n    ,\n    t.o = function(e, n) {\n        return Object.prototype.hasOwnProperty.call(e, n)\n    }\n    ,\n    t.p = \"\",\n    t(t.s = 0)\n}([function(e, n, t) {\n    \"use strict\";\n    Object.defineProperty(n, \"__esModule\", {\n        value: !0\n    });\n    var r, o = t(1);\n    document.body.appendChild(((r = document.createElement(\"pre\")).innerHTML = [\"Hello webpack!\", \"5 cubed is equal to \" + Object(o.a)(10)].join(\"\\n\\n\"),\n    r))\n}\n, function(e, n, t) {\n    \"use strict\";\n    //只打包了square\n    n.a = function(e) {\n        return e * e\n    }\n}\n]);\n\n```\n#### 2、react组件打包结果\n\n同样，你只需要看函数的最末尾，发现square和cube都打包进来，tree-shaking没有生效。\n这是为什么呢？我想可能和使用了babel-loader有关，而webpack官方的demo也没有对react组件的tree-shaking做说明，所以我暂时认为它还存在一定的缺陷。让我们期待webpack4，看它能不能更好的解决大部分js的tree-shaking功能。\n```javascript\nwebpackJsonp([0], {\n    27: function(e, t, u) {\n        \"use strict\";\n        r(u(2)),\n        u(8);\n        var n = r(u(28));\n        function r(e) {\n            return e \u0026\u0026 e.__esModule ? e : {\n                default: e\n            }\n        }\n        ReactDOM.render(n.default, document.getElementById(\"root\"))\n    },\n    28: function(e, t, u) {\n        \"use strict\";\n        Object.defineProperty(t, \"__esModule\", {\n            value: !0\n        }),\n        t.default = void 0;\n        var n, r = (n = u(2)) \u0026\u0026 n.__esModule ? n : {\n            default: n\n        }, o = u(29);\n        var c = function() {\n            return r.default.createElement(\"div\", null, (0,\n            o.square)(10))\n        };\n        t.default = c\n    },\n    29: function(e, t, u) {\n        \"use strict\";\n        Object.defineProperty(t, \"__esModule\", {\n            value: !0\n        }),\n        //打包了square\n        t.square = function(e) {\n            return e * e\n        }\n        ,\n        //打包了cube\n        t.cube = function(e) {\n            return e * e * e\n        }\n    }\n}, [27]);\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyy1115%2Fwebpack-tree-shaking","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyy1115%2Fwebpack-tree-shaking","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyy1115%2Fwebpack-tree-shaking/lists"}