最近在做一个 Vue 项目的时候，突然发现了一个有意思的知识点。

有几位客服反馈说在点击某个链接跳转的时候，老是没得反应，导致选不了选项。我就很奇怪，内网环境下是没有问题的，所以代码出问题的可能性不大，怎么外网就有这种问题呢？后来仔细看了一下才发现，原来是运维那边出了点纰漏导致外网有些客户的 JavaScript 资源加载不出来，进而导致无法跳转。这里涉及到了 Vue 的异步组件知识，只有当切换到某个组件时，其单独打包的资源才会被加载。不同于统一打包的情况，这样做可以利用代码切割减少首屏加载时的资源大小，能够提升一定的加载速度，优化用户体验。接下来就自己重新做一下这个异步组件。

以下命令行操作均在 Linux 环境下进行。

一、搭建项目

先切换到你的项目根目录下，此时应该是一个空文件夹。

然后用 npm 命令初始化，添加具有一些默认选项的 package.json 文件。

1

$ npm init -y

然后开始创建必要的文件：

1

$ sudo touch .babelrc index.html

自从工作之后，就已经很久没有写过博客了。时间被分割得比较碎，积累了一段时间的学习成果，才写下了这篇博客。

之前有写过 Webpack4 的文章，但是都比较偏入门，唯一的一篇实战篇 —— 基于Webpack搭建React开发环境，也是比较简单的，没有涉及到 CSS 抽取，第三方库打包等功能，这篇文章相对而言比较深入。但由于作者水平有限，难免存在谬误之处，欢迎大家指正。

还有没入门的童鞋可以参考我之前的文章：

• 浅入浅出webpack
• 基于Webpack搭建React开发环境

一、初始化项目

在命令行中敲入如下命令：

1

$ mkdir Webpack-Vue && cd Webpack-Vue && npm init -y