Next.js是一个新的通用JavaScript框架，它为基于React和服务器的Web应用提供了一个新的可选方案。
Next.js目前已经开源，https://zeit.co/blog/next
Next.js会自动进行代码分割，它基于你的应用程序中的页面。例如,如果你的一个模块至少在你的页面的一半使用，然后它进入到主JavaScript包中。如果没有，该模块将停留在页面的包中。
这是一个相当不错的默认设置。但有时，我们需要更好地控制加载模块。例如，看看下面的场景:
- 我们正在建立一个基于official firebase API,的hacker news clone
- 我们在服务器上获取数据来执行SSR，
- 当需要时，我们还会在客户端获取数据（当切换页面）
：在本例中，我们的主应用程序包包含了 firebase 模块，因为它在我们的所有页面中都使用过。这是一个相当大的模块。（超过了react,react-dom和next.js合在一起的大小 ）
但当到了客户端时，我们只是在当用户开始浏览不同的页面时，需要它。因此，如果我们能够在那个时候加载firebase模块，我们就可以改进我们的应用程序的初始加载。
这正是我们在这堂课上要做的。
安装
在这节课上，我们已经建立了一个非常基础的hacker news clone。
下面是如何得到它的方法:
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout firebase-hn
然后你就可以运行这个应用了:
npm install
npm run dev
现在，访问http://localhost:3000并尝试应用程序。
分析
这款应用看起来是这样的，它是一个非常基本的功能:
Paste_Image.png
现在，让我们试着了解一下我们的应用程序包里面是什么。
为此，只需运行以下命令:
npm run analyze
然后，它将启动一个 webpack bundle analyzer 分析器，您将能够检查每个JavaScript包内部的内容。
因此，firebase模块包含在哪里呢？
- inside commons.js bundle
- inside main.js bundle
- inside pages/index.js bundle
- in all pages
分析结果
正如您所看到的，firebase模块保留在commons.js包。
Paste_Image.png
这很简单，因为它在我们应用的所有页面中都使用过。
延迟加载
只有当用户试图导航到不同的页面时，我们才使用firebase模块。所以，如果我们能在那个时候加载firebase模块，这对我们的应用来说是一个巨大的胜利。
幸运的是，我们可以很容易地做到这一点通过Next.js的动态导入功能。
让我们开始吧。
与firebase相关的代码位于lib/load-db.js文件中。这里是内容:
export default async () => {
const firebase = require('firebase')
try {
firebase.initializeApp({
databaseURL: 'https://hacker-news.firebaseio.com'
})
} catch (err) {
// we skip the "already exists" message which is
// not an actual error when we're hot-reloading
if (!/already exists/.test(err.message)) {
console.error('Firebase initialization error', err.stack)
}
}
return firebase.database().ref('v0')
}
这段代码在每个页面的getInitialProps函数中使用。
这是一个相当不错的代码，它使用require 加载firebase 模块。
现在，我们要对上面的代码做一个小的改动，当我们需要firebase模块时。
// const firebase = require('firebase')
const firebase = await import('firebase')
在这里，我们使用import()函数来加载firebase模块。它返回一个promise，我们使用await并resolve这个模块。
尝试应用上述更改并再次分析JavaScript包:
npm run analyze
然后，选择firebase模块所在的包的名称。这可能是:
- commons.js
- main.js
- chunks/firebase.js
- chunks/firebase-[a-random-string].js
自己的包
正如你看到的，它有自己的bundle，它的名字看起来像:
chunks/firebase-[a-random-string].js
Paste_Image.png
当您试图导入firebase时，这个包就被加载了。
让我们做个测试
现在让我们试着看看它在浏览器中是如何工作的。
为此，我们需要运行我们的应用程序的生产版本，你可以这样做:
npm run build
npm run start
然后，在浏览器中启动该应用程序，该程序具有良好的网络检查调试器。(为了让事情变得简单，我建议你应该使用Chrome)
现在，在Chrome中加载http://localhost:3000并打开网络检查器。
Paste_Image.png
然后，清除网络检查器中的当前数据。
你可以在上面的图片中点击红色方块的选择图标。
但是，如果浏览器版本发生了变化，那么位置可能就在不同的位置。
现在，单击页面上列出的任何标题。检查网络督察。
然后，点击“Home”链接，再次进入首页。检查网络督察。
你如何最好地描述你所检查过的东西?
- “firebase” bundle loads every time
- “firebase” bundle loads only in the first time
- “firebase” bundle loads only in the second time
- “firebase” bundle never loads
测试结果
正如您所见，它只在您第一次浏览页面时才加载。这就是实际发生的情况。
在第一次，pages/post.js 页面的 getIntitialProps 导入firebase模块(通过lib/load-db.js)。所以，这个应用程序加载了这个包。
即使是第二次，pages/index.js 页面导入 firebase 模块，但是在那个时候，它已经被加载了，并且没有理由再加载它。
最后
坦率地说，这个示例并不是延迟加载的最佳用例。只是因为,
- 您需要在所有页面中使用firebase模块。
- 延迟加载的firebase模块减小了主JavaScript包app.js的大小。但是它不会影响页面加载时间，因为页面是由服务器呈现的。
- 主JavaScript包的加载不会阻塞初始的HTML渲染。
这给我们带来的唯一好处是快速的JavaScript交互，因为应用程序.js由于减小的大小而载入速度更快。
无论如何，这是一个很好的例子，我们可以演示延迟加载模块。
因此，你可以在你的应用中使用它。
网友评论