Я изучаю тряску деревьев с помощью приложения webpack 4 / React, которое использует Lodash.
Сначала мое использование Lodash выглядело так:
import * as _ from "lodash";
_.random(...
Я скоро узнал,через BundleAnalyzerPlugin, что весь Lodash был включен в сборки dev и prod (527 МБ).
После поиска в Google Я понял, что мне нужно использовать определенный синтаксис:
import random from "lodash/random";
random(...
Теперь только random и его зависимости правильно включены в комплект, но я все еще немного сбит с толку.
Если мне нужно явно указать функции в моем importСкажите, тогда какую роль на самом деле играет тряска деревьев? BundleAnalyzerPlugin не показывает разницы в размере полезной нагрузки при сравнении между сборками dev и production mode (это правильный маленький размер в обеих, но я думал, что тряска дерева имела место только в производственных сборках?).
У меня сложилось впечатление, что TreeShaking выполнит некоторый статический анализ кода, чтобы определить, какие части кода фактически используются (возможно, на основе функции?), И отрежет неиспользуемые биты.
Почему мы не можем всегда просто использовать * в нашем import и полагаться на TreeShaking, чтобы выяснить, что на самом деле включить в комплект?
В случае, если это поможет, вот мой webpack.config.js:
const path = require("path");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
entry: {
app: ["babel-polyfill", "./src/index.js"]
},
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: "static",
openAnalyzer: false
})
],
devtool: "source-map",
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
chunkFilename: "[name].bundle.js",
publicPath: ""
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
include: /src/,
options: {
babelrc: false,
presets: [
[
"env",
{
targets: {
browsers: ["last 2 Chrome versions"]
}
}
],
"@babel/preset-env",
"@babel/preset-react"
],
plugins: ["syntax-dynamic-import"]
}
},
{
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve("ts-loader"),
options: {
compiler: require.resolve("typescript")
}
}
]
}
]
},
resolve: {
symlinks: false,
extensions: [".js", ".ts", ".tsx"],
alias: {
react: path.resolve("./node_modules/react")
}
}
};
Я использую веб-пакет с webpack --mode=development и webpack --mode=production.