今天我们要介绍的是Paul Melero，一个牛掰的web开发者，一个喜欢把自己会的内容传授给其他人的盆友。
你可知道他是 Testing Vue.js Components with Jest Spanish translation的作者，所以不要小瞧了他哦。
让我们看下他给我们分享的小技巧!
我假设你已经熟读并背诵“code splitting” 和 “lazy loading”
让我们看一下Webpack’s docs中的定义:
懒加载，后者是“按需加载”， 是一个非常好的优化网站和App的方式。这个方法的本质就是按照逻辑模块切割代码，当用户请求这个模块的时候呢再进行加载。这种方式的加载速度要高于直接在初始化的时候加载整个应用，并且比完整加载所有模块要轻量。因为有的模块，甚至从来就没有用到过。
这种特色应该被我们使用的框架天然支持才对，因为已经有人建议，甚至是在React ecosystem)中。
The meat:
任何时候我都会建议使用动态引入的方式来加载组件。这些组件都会通过webpack实现按需加载。
// 常规的import加载
import MyComponent from "~/components/MyComponent.js";
// import*函数*动态加载
const MyComponent = () => import("~/components/MyComponent.js");
释义:
当使用webpack打包我们的应用时，我们会用不同的方式去模块化（ES Modules, CJS, AMD等等），如果我们选在ES6的模块化方式（推荐用法），你会用到下面的语法：
import MyComponent from "~/components/MyComponent.js";
要知道，很多场景下我们都希望使用异步组件。正如Alex Jover在这篇文章中提到的：
- 导入组件
- Vue Router中，使用组件
- Vuex的模块
让我们看一下这个语法然后聚焦到import部分。
如果你正在用的Webpack （或者 Parcel!)，这个语法会在 编译时进行转换，并且这些工具会用Promise语法异步加载assets/modules/components。
你或许会疑惑为什么需要一个箭头函数，正Axle解释的我们需要把import函数包裹起来，只有当真正需要执行的时候我们才调用它。
为了展示他们是如何懒加载的，我们准备了一个使用Nuxt.js的代码库，一共两个页面，并且都加载了组件A和组件B，但是他们的区别就是使用和不使用动态加载技术。
我们看到的现象是，当导航加载后，使用动态加载时webpack加载2个分割的文件。但是，使用常规的import加载的页面组件(/without)，就会加载的文件比较大，因为它一次性加载了所有内容。
Image showing network waterfall when navigating to both pages. And the differences between both techniques (with and without dynamic imports)
Yes, by using this technique, Webpack will create separate files (“chunks”) to load them when needed (lazily). Custom chunk naming can be done with Magic comments but that will be the subject of another article 😉.
上图展示了nuxt的编译后的结果。我们可以看到使用动态的加载方式，就会为组件A和组件B打包成两个不同的文件。
以上就是所有内容
更多有关代码分割技术的解释请参考:
- De facto linked article by Anthony Gore: https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/
- Google’s web fundamentals article by Addy Osmani and Jeremy Wagner about code splitting: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/
- Webpack 文档: https://webpack.js.org/guides/code-splitting/
*PS: 这个例子建议使用webpack的4.29.6，Nuxt的2.4.0和Vue的2.5.22版本。
Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!
