webpack和react

by Didier FRANC

由Didier FRANC

使用React和Webpack进行简单的代码拆分 (Straightforward code splitting with React and webpack)

在您的应用程序大小增加得太快之前，一切似乎都很完美…… (Everything seemed perfect until your app size increased too fast …)

介绍 (Introduction)

You’re a big fan of React and even bigger fan of the modern JavaScript development stack. React, Redux, ES6, Babel, and webpack are your favorite toys, so don’t they have any secrets for you? Sure they do — which you’ll see after you read the following.

您是React的忠实拥护者 ，也是现代JavaScript开发堆栈的忠实拥护者 。 React，Redux，ES6，Babel和Webpack是您最喜欢的玩具，所以它们对您来说没有任何秘密吗？ 当然可以。阅读以下内容后，您会看到。

This post does not aim to be exhaustive, but will describe a straightforward and modern method to solve a problem related to the way we like to code.

这篇文章并非旨在详尽无遗，而是将描述一种简单而现代的方法来解决与我们喜欢的编码方式有关的问题。

问题 (The problem)

Here is a good example. As you can see, webpack created two JavaScript files: bundle.js and vendor.js. It’s the first step of code splitting, separating your vendors from your own code. This is well-documented in the new webpack documentation.

这是一个很好的例子。 如您所见，webpack创建了两个JavaScript文件： bundle.js和vendor.js 。 这是代码拆分的第一步，将您的供应商与您自己的代码分开。 在新的webpack文档中对此进行了详细说明。

It’s a prerequisite for the next steps. Sharing vendors such as React and Redux with all your components is essential. But as you can see, our app size is close to ~2MB without its images, fonts, and other assets. Our app will take seconds to load and even more with a crappy mobile connection. Why don’t we split it into multiple chunks, which will load only when we need it? Easier said than done.

这是后续步骤的先决条件。 与所有组件共享React和Redux等供应商至关重要。 但是正如您所看到的，没有图像，字体和其他素材，我们的应用程序大小接近2MB。 我们的应用程序将花费几秒钟来加载，而糟糕的移动连接将花费更多时间。 我们为什么不将其拆分为多个块，仅在需要时才加载？ 说起来容易做起来难。

从哪儿开始 ？ (Where to start ?)

There are many ways when you care about speed and performance: one of them is Server Side Rendering, but it’s not the subject today ?.

当您关心速度和性能时，有很多方法：其中之一是服务器端渲染，但这不是今天的主题？

In this article, we’re exploring code splitting with webpack, and the best place to start is the webpack repo itself. There are other solutions as well. That being said, we have to make a choice.. And the winner is … import() (formerly named System.import()). I call it the “modern way”.

在本文中，我们将探讨使用webpack进行代码拆分， 最好的起点是webpack仓库本身 。 还有其他解决方案。 话虽如此，我们必须做出选择。.赢家是… import() (以前称为System.import() ) 。 我称之为“现代方式”。

System.import has been deprecated.medium.com

System.import已被弃用。 medium.com

1.要聪明 (1. Be smart)

There is no magic tool, and to get the best compromise you’ll probably have to use your brain ?. For example, vendor.js shouldn’t contain every library, only those which are “global” like React, Redux, or moment.

没有魔术工具，要获得最佳折衷，您可能需要动动脑筋？ 例如，vendor.js不应包含所有库，而应仅包含“全局”库，例如React，Redux或moment。

2.开始拆分代码(真正的代码) (2. Start code splitting (the real one))

Loading a component (or any ES module) this way will be interpreted as a split point by webpack.

这种方式加载组件(或任何ES模块)将被webpack解释为拆分点。

Now, imagine we have the following at the root of our app. The problem is the Home component. With its exotic library, it is relatively big compared to the rest of the app. Reminder: for now everything is packed in the same bundle and loaded at the same time.

现在，假设我们在应用程序的根目录有以下内容。 问题是Home组件。 凭借其奇特的库，与该应用程序的其余部分相比，它相对较大。 提醒：目前，所有内容都打包在同一捆绑包中，并且同时加载。

Let’s create a simple wrapper component which will asynchronously load and render our Home component. It will be loaded only when you’re logged in.

让我们创建一个简单的包装器组件，该组件将异步加载和呈现Home组件。 仅当您登录时才会加载。

We can make it even simpler by standardizing this method. I externalized it as the tiny react-code-splitting. And the final result is visible here:

通过标准化此方法，我们可以使其变得更加简单。 我将其外部化为微小的React代码拆分 。 最终结果在这里可见：

If you want to see this snippet in context, have a look at redux-react-starter.

如果要在上下文中查看此片段，请查看redux-react-starter 。

3.输出 (3. Output)

As you can see, webpack created a new file named 0.[chunkhash].js. It’s our old bro Home ?.

如您所见，webpack创建了一个名为0. [chunkhash] .js的新文件。 这是我们的旧兄弟之家吗？

4.享受好处 (4. Enjoy the benefits)

As you can see, the Home component (0.bf87aaa616cea4a1ed40.js) was loaded on demand, just after I logged in. Note that performance will be even better if you take care with caching and http/2. You can make Lighthouse Report your favorite tool to benchmark your app performance.

如您所见，在我登录后，就按需加载了Home组件(0.bf87aaa616cea4a1ed40.js)。请注意，如果您注意缓存和http / 2，性能会更好。 您可以使Lighthouse Report成为您最喜欢的工具，以基准测试您的应用程序性能。

下一步是什么 ？ (What’s next ?)

Don’t hesitate to explore long term caching, offline capabilities, and so on. To put it simply: how to make a progressive web application, again and again.

不要犹豫，探索长期缓存，脱机功能等等。 简单地说： 如何一次又一次地创建一个渐进式Web应用程序 。

You don’t want to miss any of my articles ? follow me on twitter @DidierFranc

您不想错过我的任何文章吗？ 在Twitter上关注我@DidierFranc

翻译自: https://www.freecodecamp.org/news/straightforward-code-splitting-with-react-and-webpack-4b94c28f6c3f/

webpack和react