我想从 webpack
lodash
以及我未使用的 multiply
函数
我有 2 个主要文件 app.js
和 math.js
它包含以下代码-
应用程序.js
import map from "lodash/map";
import { sum } from "./math";
console.log("💩");
console.log(`2 + 3 = ${sum(2, 3)}`);
map([1, 2, 3], x => {
console.log(x);
});
数学.js
export const sum = (a, b) => a + b;
export const multiply = (m, n) => m * n;
webpack.config.js
const path = require("path");
const webpack = require("webpack");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const Jarvis = require("webpack-jarvis");
let plugins = [new Jarvis()];
if (process.env.NODE_ENV === "production") plugins.push(new UglifyJSPlugin());
const config = {
entry: "./app.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
}
]
},
plugins
};
module.exports = config;
我的 npm
脚本看起来像 -
"scripts": {
"dev": "webpack --optimize-minimize --mode development",
"dev:watch": "webpack --watch --optimize-minimize --mode development",
"prod": "webpack -p --optimize-minimize --mode production",
"prod:watch": "webpack -p --watch --optimize-minimize --mode production",
"start": "npm run prod",
"clean": "rm -rf dist"
}
完整代码可在 https://github.com/deadcoder0904/webpack-treeshake 获得
我已经尝试使用 UglifyJSPlugin,但在生成的包中它仍然显示我未使用的 math.js
中的 multiply
函数。此外,从 npm run prod
生成的 production
包仍然是 20kB
,这是很多而且我看到很多 lodash
东西也包括在内。
最佳答案
我找到了答案
要在 tree shaking 中使用 lodash
,我们应该首先安装 lodash-es
,然后移除 lodash
依赖项
此外,它不应该先被转译,所以我们制作我们的 .babelrc
文件如下 -
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
注意,将 modules
设置为 false
会使其无法转译
现在压缩包减少到 16.2kB 和 5.79kB gzip
lodash
模块中的一些代码仍将被使用,因为它需要运行 lodash
本身,而不是来自 的
未添加到生成的包中multiply
函数>./math.js
我还需要 lodash-webpack-plugin让它工作
Treeshaking 有效 🎉
我做了一些基本的 repo 协议(protocol)来解决上述问题 -
关于javascript - Lodash 不是 TreeShaking with Webpack 和 Webpack 4?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48816704/