Vue.js和Webpack开发环境下应用程序的三种代码拆分方法

单个页面应用程序的代码拆分是提高应用程序初始载入速度的一个很好的方法。由于用户不必在一次点击中下载所有代码，他们就能更快地看到页面，并与页面进行交互。这对提高用户体验非常有帮助，尤其是在移动端，网站载入速度会直接影响到搜索引擎的SEO效果。

上篇写的Vue.js用Webpack打包时如何进行代码拆分及载入。长话短说，你将在一个单一的文件组件可以很容易地进行代码拆分，Webpack可以创建一个分割点时，import相应的模块，通过Vue很顺利的异步载入组件。

我认为代码拆分最困难的部分不是如何让它跑起来，而是知道什么时候该执行它。我想说，在设计应用程序时，代码拆分需要在考虑架构的时候就该进行考虑了。

在本文中我将和大家聊聊代码拆分vue.js单页应用在目前阶段的三种模式：

• 通过页面来拆分

• 通过页面的折叠来拆分

• 通过选择条件来拆分

1. 通过页面来拆分

逐页拆分代码是一个显而易见的做法。本文的示例中这个简单的应用程序有三页：

如果我们要保证每一页是由其自身的单一文件组成例如home.vue，about.vue和contact.vue，那么我们就可以用Webpack的动态导入功能将它们拆分成单独的构建文件。然后，用户访问不同的页面时，Webpack将异步载入所请求的页面文件。

如果你使用Vue的路由器这是很简单的实施方案，只需要把你的页面写成一个单独的组件就好了。

const Home = () => import( './Home.vue');

const About = () => import( './About.vue');

const Contact = () => import( './Contact.vue');

const routes = [

{ path: '/', name: 'home', component: Home },

{ path: '/about', name: 'about', component: About },

{ path: '/contact', name: 'contact', component: Contact }

];

看看我们生成这个代码时产生的统计数据。每一页都有自己的文件，但也应该注意到有一个主要的构建文件称为build_main.js，其中包含了所有常见的代码以及异步载入其他文件的各种逻辑。无论用户访问哪种路由，都需要载入它。

现在让我们看看，示常式序的联系页面通过输入URL：http://localhost:8080/#/contact。我们查看一下Network tab时，我们会看到以下的文件已经载入了：

注意：build_main.js被载入了，这意味着index.html对服务器请求了这个脚本，这正是我们所期待的。但对build_1.js请求是bootstrap_a877...发起的，这是WebPack脚本负责的异步载入文件。编译时会自动使用Webpack的动态输入功能添加这个脚本。有一点很重要，build_1.js没有在初始页面载入。

2. 通过页面的折叠来拆分

可以通过"折叠"页面的任何部分，使最初载入时它们在视图中不可见。您可以异步载入此内容，因为用户通常需要一两秒钟后才会读取这些折叠起来的内容，尤其是在第一次访问站点时。

在这个示例应用程序中，我们认为折线下面的内容可以折叠，所以我们初始载入时包括导航栏和页面中的首标题及内容，但下面的其他任何东西，都可以之后再载入。我现在将创建一个被称为belowfold组件和并做好相关的标记：

当我们将代码构建时，我们将在它自己的单独文件中看到下面的折叠块：

注意：当然这个折叠块很小（1.36kb）似乎不值得这么做。希望大家理解只是因为示例是一个内容很小的演示应用程序。在一个真正的应用程序中，页面的大部分都不大可能低于这个值，可能会有大量的代码，包括任何子组件的CSS和js文件。

3. 通过选择条件来拆分

代码拆分的另一个好的选择是有条件的显示任何代码。例如，窗口、Tab页面、下拉菜单等。

示例应用程序有一个窗口，打开后，你如果按"今天注册"按钮，会显示：

和前面一样，我们只是将模态代码移动到它自己的单个文件组件中：

注意，我通过v-if进行显示控制模式的打开/关闭，但它也有条件地呈现模态组件本身。因为在页面载入时是没有的，只有在打开模式时才下载相应的代码。

这很酷，因为如果用户从不打开模式，他们就不必下载代码。唯一的缺点是，它有一个小的体验成本：用户必须等到他们按文件的下载按钮才知道这个按钮要表达的所有内容。

我们重新构建之后，现在的输出如下：

会出现我们之前没有载入的另一个约~ 5kb的模块。

结论

这是一个关于应用程序架构的代码分拆的三个思路方法。我相信如果你运用你的想象力，还有其他的方法可以去尝试！

原文出自vuejsdevelopers网站，汇智网小智翻译。