标签: tree-shaking

我已经设置了带有角度的webpack 2,而且大多数它似乎都有效.它似乎并没有tree-shaking,因为我有一个几乎什么也没做的应用程序,而且vendor.js仍然是800+ KB.

似乎关于如何打开树摇晃的信息很少,但据我所知,它为ES6模块自动打开,但不适用于ES5.是这样吗？

最重要的是:如何使用webpack2对treecript/angular2应用树摇动？

在执行以下捆绑可视化时,Webpack将包括捆绑中的所有 d3.js.问题可以通过这样做来解决,但这有点挫败了自动树摇动的目的.import { select } from 'd3'import { select } from 'd3-selection'

在我们的非库代码中,树摇动似乎在简单的情况下起作用.

我们"modules": false在我们.babelrc中使用以保留模块语法并'module'在webpack.config.js resolve: { mainFields: ['module', 'browser', 'main'] }中使用resolve 来选择d3的基于模块的代码.如您所见,导入的node_modules/d3/index.js在ES6模块中进行了分区,而不是单片浏览器包或CommonJS导出.

这应该在webpack github页面上作为一个问题发布,还是我做错了什么？这是使用图书馆的所有最新版本(d3@4.5.0,webpack@2.2.1,等)

编辑:似乎这与以下问题有关:

• https://github.com/webpack/webpack/issues/2867
• https://github.com/webpack/webpack/issues/2899

我刚刚将我的反应应用程序从webpack 1更新到webpack 2.但是,我的捆绑包大小增加了~30Kb.我希望捆绑的大小会减少,我怎么能确认树摇动的效果.为什么增加？

我尝试使webpack 树摇动删除未使用babel-polyfill.

index.js 文件包含:

import 'babel-polyfill'
const add4 = n => n + 4
const add5 = n => n + 5
add4(6)

console.log('boom', add4(4))

在这个文件中没有代码需要任何es2015 + polyfill,所以我期望树摇动删除捆绑输出中未使用的babel-polyfill.事实并非如此,捆绑包仍然包含它们(缩小).

这是一个带有此代码的git repo.

webpack配置:

const MinifyPlugin = require('babel-minify-webpack-plugin')

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle-webpack.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new MinifyPlugin({ mangle: { topLevel: true } }, { comments: false }) …

我将 Google Firebase Cloud Functions 与 TypeScript 一起使用，我发现即使每个函数都是单独部署的，但它们都共享相同的包和依赖项，即使某些函数不使用它们也不导入它们。

就我而言，一个云功能使用 Redis，而其他云功能不使用。我有10个功能。所有 10 个函数实际上最终都导入了与 redis 相关的代码，即使它们没有导入它们。

由于所有函数共享相同的入口点，index.js。目前似乎不可能为每个函数设置单独的摇树包/入口点。

这在包大小/冷启动时间/内存/等方面非常低效。这也意味着随着我拥有越来越多的功能，所有功能的包大小将一起增长。它不可扩展。

有没有办法不共享入口点，index.js，并通过使用像 webpack 这样的打包器来拥有完全独立的包？

我们使用 webpacksplitChunks来捆绑共享包，现在我们对我们的模块进行了 tree shake。（我们的图标、ui 组件、钩子和助手都是 npm 包）。

问题是，我们的包是完全可以进行树摇动的，但是splitChunks我们所有的包都被视为vendor~main.js并导入，没有任何树摇动。

Tree Shaking 只适用于本地进口吗？我们应该如何将 tree shake 和 splitChunks 用于 npm 包？

\n

从 \xe2\x80\x98react\xe2\x80\x99 导入 * as React

\n

建议使用流类型 I\xe2\x80\x99m 并像这样导入 React。我的问题是这是否会对摇树产生影响？这是否会导入超出我需要的内容并增加我的 js 文件大小？

Angular 10 中的树摇晃正在“摇晃”我的 AsyncPipe。

Angular 10的发行说明博客条目引入了一种新--strict模式ng new：

这样做的一件事是：

将您的应用程序配置为无副作用以启用更高级的摇树

官方文档说：

当您使用严格模式创建项目和工作区时，您会注意到位于 src/app/ 目录中的额外 package.json 文件。该文件通知工具和打包器该目录下的代码没有非本地副作用。

这是其中的内容package.json：

{
  "name": "heroes",
  "private": true,
  "description_1": "This is a special package.json file that is not used by package managers.",
  "description_2": "It is used to tell the tools and bundlers whether the code under this directory is free of code with non-local side-effect. Any code that does have non-local side-effects can't be well optimized (tree-shaken) and will …

我正在使用vite 库模式构建一个库，问题是捆绑器不可进行树摇动。

这里、这里、也许这里也有一些相关的主题。

那么，有人有这方面的经验吗？

我是 webpack 的新手，在构建处理方面，我一直依赖于 create-react-app 等工具的开箱即用功能。但是，我现在才开始“尝试”并深入了解事物 - 所以请原谅我的新手理解。

我们在整个应用程序中都使用 Lodash，并且我们正在努力确保我们只导入我们需要的内容。据我所知，有两种导入方式：

1. import assign from 'lodash/assign';
2. import {assign} from 'lodash-es';

我个人更喜欢第二个选项，因为如果您使用多个 Lodash 函数，您可以将所有导入合并为一行。

所以我安装了 lodash-es 库，从我的 package.json 中删除了 lodash，更新了所有的导入，然后运行了一个干净的构建。但是，当我使用 source-map-explorer 查看包时，即使我的 package.json 中没有列出 lodash，我也会看到对lodash-esas 的引用lodash。我认为这是因为它在 create-react-app 中的某个地方发货。请参阅下面的源地图...

使用import {assign} from 'lodash-es'约定的示例 Sourcemap

我认为这是一件坏事，并认为我可能正在“双重导入”已经在 create-react-app 中使用/导入的 lodash 函数。所以我尝试使用选项 1. 来做我的导入。然而，令我惊讶的是，实际上应用程序的总大小似乎更大，而且 lodash 导入的大小实际上比使用选项 2 时多约 3k！

使用import assign from 'lodash/assign'约定的示例 Sourcemap

所以我的问题是 - 我是否正确解释了 lodash-es 中的源映射实际上是一种更有效的导入方式，而“双重导入”实际上并不是一种风险。还是选项 1 约定是使用 lodash 处理导入的最佳方式？