代码分割是提高单页应用程序加载率的好方法。 用户不必等到所有代码加载一次即可快速查看页面并与之交互。 这尤其会改善中国联通这边的用户体验，也能得到很好的SEO，因为Google会降低加载缓慢的网站的权重。
上周我写了一篇关于如何使用Webpack分离Vue.js应用程序代码的文章（注：比较简单，不需要梯子）。 简而言之，单个文件组件中包含的所有内容都可以轻松分离。 由于 Webpack 可以在导出模块时创建分离点，因此 Vue 可以轻松愉快地异步读取组件。
我相信，让代码分离跑起来并不难，难的是理解何时何地使用它。 甚至可以说，在设计你的应用程序时，你需要一个架构思想来分离代码。
在这篇文章中，我将介绍Vue.js单页应用程序的三种代码分离方法：
注：原文发表于
1. 按页
按页面拆分是显而易见的，这个简单的计数器示例中有三个页面：
一旦我们确认每个页面都对应了自己的单页面组件，例如：Home.vue、About.vue、Contact.vue等，那么我们就可以利用Webpack的动态导入方式将它们分别分离成独立的生成文件一。 当用户访问不同的页面时，Webpack会异步读取所需的页面文件。
如果您使用 vue-router，这更容易实现，因为您的页面已经是一个单独的组件。
const Home = () => import(/* webpackChunkName: "home" */ './Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './About.vue');
const Contact = () => import(/* webpackChunkName: "contact" */ './Contact.vue');
const routes = [
{ path: '/', name: 'home', component: Home },
{ path: '/about', name: 'about', component: About },
{ path: '/contact', name: 'contact', component: Contact }
];
从生成统计数据来看，每个页面都占据了自己的位置。 但要注意的是，有一个名为build_main.js的打包文件，里面包含了所有异步加载的公共代码和其他文件逻辑，无论用户访问什么路由都需要加载它。
例如，现在我通过地址读取“联系方式”页面。 当我切换到ChromeNetwork选项卡时，我会发现以下文件已经加载：
注意其中的build_main.js启动器是index，这意味着index.html需要脚本，这正是我们想要的。 而build_1.js的启动器是bootstrap_a877...这是Webpack负责异步读取文件的脚本。 当使用Webpack的动态导入方式时，会手动生成这个脚本。 重点是 build_1.js 不会抑制初始页面加载。 2. 彩页下
“折叠”下方是页面最初加载时在窗口中不可见的页面部分。 由于用户在下拉之前通常会花一两秒钟的时间阅读“文件夹”上的内容，因此可以异步读取该内容，特别是当他们第一次访问该网站时。
在此示例中webpack代码构建，我假设“文件夹”的“折叠线”位于标题下方webpack代码构建，导航栏和标题将在页面开头加载，下面的所有内容将在前面加载。 现在创建一个名为 BelowFold 的组件并相应地进行一些代表性标记：
首页.vue：
Jumbotron heading
...
const BelowFold = () => import(
/* webpackChunkName: "below-fold" */ './BelowFold.vue'
);
export default {
...
components: {
BelowFold
}
}
下面折叠.vue：
Subheading
Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
...
...
我们发现打包后，下面的fold块会有独立的文件：
注意：下折叠块是如此之小（1.36kB），以至于似乎不值得将其分开。 这只是因为这是一个内容很少的演示。 在真实的应用中，页面上的大量内容都会位于“文件夹”中，这些内容可能是包括CSS或JS文件在内的大量子组件。
3.条件内容
代码分离的另一个不错的选择是有条件地显示内容。 如模态窗口、选项卡、下拉菜单等。
单击“今天登录”按钮后，以下应用程序将出现一个模式窗口：
像往常一样，我们看一下这个单文件组件的代码：
首页.vue：
...
const BelowFold = () => import(
/* webpackChunkName: "below-fold" */ './BelowFold.vue'
);
const HomeModal = () => import(
/* webpackChunkName: "modal" */ './HomeModal.vue'
);
export default {
data() {
return {
show: false
}
},
components: {
HomeModal,
BelowFold
}
}
HomeModal.vue：
...
import Modal from 'vue-strap/src/Modal.vue';
export default {
props: ['show'],
components: {
Modal
}
}
请注意，我已经将 v-if 放置在模态中。 布尔值 show 控制模态的开/关状态，并且它还有条件地渲染模态组件。 由于页面将其读取为 false，因此仅当模式打开时才会加载代码。
很酷不是吗？ 如果用户没有打开模式，他们将永远不会下载此代码。 只是一些小的用户体验缺点：用户必须等到按下按钮才能加载代码。
重新生成后，会有如下输出信息：
另一个~5kB 为什么我们应该尽早加载它。推理
这是构建应用程序时代码分离的三个想法。 相信在你的想象力的帮助下你会找到其他的方法。
点击获取最新的Vue.js文章、教程和热门项目（其实已经404了）
