web-dev-qa-db-ja.com

LodashはWebpack4のWebpackでTreeShakingではありませんか？

lodashから生成されたバンドルからの未使用のmultiply関数と同様にwebpackをツリーシェイクしたい

2つのメインファイルapp.js＆math.jsがあります

次のコードが含まれています-

app.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);
});

math.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のものもたくさん含まれています。

javascriptwebpackwebpack-2uglifyjsuglifyjs2
7
deadcoder0904

私は答えを見つけました

ツリーシェイクでlodashを使用するには、最初にlodash-esをインストールしてから、lodash依存関係を削除する必要があります

また、最初にトランスパイルしないでください。そのため、.babelrcファイルを次のように作成します-

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ]
}

modulesをfalseに設定すると、トランスパイルされないことに注意してください

そして今、バンドルは16.2kB＆5.79kB gzipに減少します

./math.jsのlodash関数が追加されていないことを除いて、lodash自体を実行する必要があるため、multiplyモジュールの一部のコードは引き続き使用されます。結果のバンドル

私もそれが機能するために lodash-webpack-plugin が必要でした

ツリーシェイクは機能しますか????

私は述べられた問題を解決するいくつかの基本的なリポジトリを作成しました-

https://github.com/deadcoder0904/webpack-exam

https://github.com/deadcoder0904/webpack-treeshake

10
deadcoder0904

@ deadcoder0904の回答に基づいて、webpack4のbabel-loaderで同じことを行う方法を次に示します（.babelrcを使用する代わりに）。

...
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    plugins: ['lodash'],
                    presets: [['env', { modules: false }]]
                }
            }
        },

注：「lodash-es」から明示的にインポートしないと、これを機能させることができませんでした（tsconfigでlodash-esをlodashにポイントした場合でも（TypeScriptを使用しています）、誰かがこれを機能させることができれば特別なimport { map } from 'lodash-es';を使用し、代わりにimport { map } from 'lodash';を使用するには、その方法を知っておくと便利です。

0
Salami