web-dev-qa-db-fra.com

Lodash pas TreeShaking avec Webpack avec Webpack 4?

Je veux utiliser l’arbre shake lodash ainsi que ma fonction multiply inutilisée à partir du paquet généré à partir de webpack

J'ai 2 fichiers principaux app.js & math.js

Il contient le code suivant -

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;

Mon script npm ressemble à -

"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"
  }

Le code complet est disponible sur https://github.com/deadcoder0904/webpack-treeshake

J'ai essayé d'utiliser UglifyJSPlugin, mais dans le paquet généré, ma fonction multiply inutilisée de math.js est toujours affichée. De plus, le paquet production généré à partir de npm run prod reste 20kB, ce qui est beaucoup et je vois beaucoup de choses lodash incluses également.

javascriptwebpackwebpack-2uglifyjsuglifyjs2
6
deadcoder0904

J'ai trouvé la réponse

Pour utiliser lodash en secouant l’arbre, nous devons d’abord installer lodash-es & supprimer ensuite la dépendance lodash

De plus, il ne devrait pas être transpilé en premier, alors nous créons notre fichier .babelrc comme suit - 

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

Notez que le réglage de modules sur false ne le transpile pas

Et maintenant, le paquet se réduit à 16.2kB & 5.79kB gzip

Certains codes du module lodash seront toujours utilisés car il est nécessaire d'exécuter lodash lui-même, à l'exception de la fonction multiply de ./math.js qui n'a pas été ajoutée au paquet résultant.

J'avais aussi besoin de lodash-webpack-plugin pour que cela fonctionne 

Treeshaking fonctionne ????

J'ai fait quelques pensions de base pour résoudre le problème énoncé -

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

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

10
deadcoder0904

En vous basant sur la réponse de @ deadcoder0904, voici comment procéder de la même manière avec babel-loader dans le Webpack 4 (au lieu d'utiliser .babelrc): 

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

Remarque: je n’ai pas réussi à faire fonctionner ceci sans importer explicitement de 'lodash-es' (même si j’ai pointé lodash-es vers lodash dans mon tsconfig (j’utilise TypeScript). Si quelqu'un peut le faire sans avoir utiliser le import { map } from 'lodash-es'; spécial et au lieu de import { map } from 'lodash'; il serait bon de savoir comment!

0
Salami