标签: tree-shaking

Cloud Native Interactive Landscape是一个开放源代码的，仅用于浏览器的应用程序，可加载静态React应用程序以可视化云原生生态系统：

• 试用应用
• 查看资料

您可以交互式查看webpack-bundle-analyzer 的结果，这是一个快照：

我不明白为什么@material-ui/core/es在node_modules和中都出现src。更笼统地说，我试图了解是否以最佳方式实现了摇树，或者是否有更好的配置方法。如果我们最喜欢摇摇晃晃的lodash，我也将不胜感激。（请注意，我们只针对常绿的浏览器。）

请随时分叉存储库并编辑webpack.config.prod.js。如果打开请求请求，Netlify将构建并部署测试服务器，您可以在test-server-url下检查结果/report.html。

我有一个项目，我在其中使用 Rollup（生成 bundle.esm.js 文件）捆绑了一个组件库。这些组件然后在另一个项目中使用，该项目生成使用这些组件的网页 - 每个页面使用不同的组件。问题是，整个组件库总是与不同的页面包捆绑在一起，无论我使用的是哪个组件，都不必要地增加了包的大小。

这是我的汇总设置：

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import pkg from './package.json';

const extensions = [
  '.js', '.jsx', '.ts', '.tsx',
];
export default [
  {
    input: './src/base/index.ts',
    plugins: [
      peerDepsExternal(),
      resolve({ extensions }),
      babel({
        exclude: 'node_modules/**',
        extensions,
      }),
      commonjs(),
    ],
    output: [
      { file: pkg.main, format: 'cjs', sourcemap: true },
      { file: pkg.module, format: 'es', sourcemap: true },
    ],
    watch: {
      clearScreen: false,
    },
  }, …

我只想将文件捆绑到我的生产版本中，除非它不是用于DEBUG;

所以我使用webpack.DefinePlugin并设置了变量DEBUG === true。

还webpack.UglifyJsPlugin使用默认选项进行配置

在 js 文件中，我喜欢这样：

const A = DEBUG === true ? null : require('./some-debug.js');
//do things with A, for example
console.log(A)

我检查了最终的包文件，A 被替换为 null（所以DefinePlugin工作正常），但some-debug.js文件的内容仍然在包 js 中。

是否可以让 webpack 不需要该文件？

ps：我想我可以resolve.alias用来解决'./some-debug.js' --> undefined. 但我想保持我的 webpack.config.js 通用，不想应用太多resolve.alias条目。

谢谢

在 Dart 中，我们可以使用show关键字有选择地导入部分文件或库...

    import 'package:http/http.dart' show get;

...但是 Flutter 会摇树。有显示关键字任何好处在颤振或者是完全毫无意义？

使用定义函数的变量还是首先使用函数更好？此外，tree-shaking 有区别吗？

我有很多计算（静态）密集型帮助程序类，并且想知道最好的（内存/速度）是什么。

这是我想到的不同方法：

class MyClass {
  readonly functionA = (v: string | number, maxDeep: number, curDeep: number = 0): string => {
      if (curDeep < maxDeep) {
          return this.functionA(v, maxDeep, curDeep + 1);
      } else {
          return "function A" + v;
      }
  }

  static functionB(v: string | number, maxDeep: number, curDeep: number = 0): string {
      if (curDeep < maxDeep) {
          return MyClass.functionB(v, maxDeep, curDeep + 1);
      } else {
          return "function B" + v;
      }
  }

  functionC(v: string …

我的目标是lodash在我的房子里摇树(等等)webpack.prod.js.这是我的配置文件.为了完整起见,我也将包括webpack.dev.js,webpack.common.js,tsconfig.json和package.json:

webpack.common.js:

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif|obj)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.glsl$/,
                loader: 'webpack-glsl-loader'
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                enforce: 'pre',
                loader: 'tslint-loader',
                options: { failOnHint: true }
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    entry: { …

我需要执行 tree-shaking 来减少使用 lodash 和其他一些库的包大小。我已经像这样转换了所有 lodash 导入： import {isEmpty} from "lodash"; 但包大小仍然没有减少。

要使用像“ ”这样的插件lodash-webpack-plugin，我们需要在 中进行配置webpack.config.js，这在 create-react-app 项目中是不可能的。我尝试使用react-app-rewired但遇到以下问题： 错误屏幕截图

项目中使用以下版本：

1. 反应脚本：3.4.1
2. 网络包：4.42.0
3. 反应：16.13.1
4. 洛达什：2015年17月4日

我有一个用 Typescript 创建的插件，我需要在这个插件中激活 Tree-shaking 。有没有办法在没有 webpack 的情况下启用此功能？