最近对我司产品进行了一点小小的优化，难度不大，但过程有点小小的波折，

0x00 缘起

我们的vendor.js有2M，app.js有1M，天呐？那么大，我们的项目文件下载就很慢了！

当老板感叹起这个的时候，刚刚熟读过vuejs官方文档的我提出来，我们还有异步组件这一项可以试试哟，有很多很多的组件其实不用全部载入，比如我们的代码编辑功能并没有开放入口，而且只有少数人才会用，但是引入的codemirror库却很大。vuejs异步组件文档中提到了，可以实现按需加载。

0x01 拨开云雾

那个章节写了一堆，异步的require之类的有点糊涂，慢慢地进行尝试，然后又阅读了webpack相关文档。发现其实跟vuejs基本上没啥关系，主要就是webpack提供的功能，总的来说要实现按需加载需要有几个条件：

• 需要用webpack2.6及以上
• ES6的话可以用import()函数方法（有async function也可以用async function的语法）
• 如果要将多个异步组件打包到一个包中，需要用注释来指定chunk名字，这样既能够与ES2015 Loader spec规范相符，webpack也可以实现自己的特性。

0x02 渐入佳境

我们的工程是基于vue-cli生成的，可能版本不是特别新，webpack版本只有2.2，升级到2.7，这一步轻松解决。

在一些特定的异步组件将原来的import依赖的方式改写

如

import EditorLayout from ‘src/layouts/EditorLayout’改写为

const EditorLayout = ()=>import(/* webpackChunkName: “editor” */ ‘src/layouts/EditorLayout’)

这样看来可以说是相当简单了。webpack编译的时候，import()函数会变为一个promise，当依赖这个组件时会发起ajax请求，请求组件的代码。

但在编译时却不太对，并没有编译出想要的editor.js。还有一些组件也想打包在一起，却出现了0.js 1.js 2.js…..

0x03 小波折

可以说百度上找到的中文博客中，内容都很垃圾，很多感觉就是将一些文档翻译了遍，可能也没有亲手操作过。于是google上搜索了”vuejs webpack code splitting doesn’t work”这样的关键字，找了几个就在某个vue的项目的issue中找到了解决方案

原来之前搭建项目时用的boilerplate项目的.babelrc用了comments: false的选项，用babel-loader载入进webpack时，webpack获取的输入中已经没有了注释，所以用作标注chunkname的注释没有了，所以所有的chunk就分散开来，变成了数字名字的代码。

所以在.babelrc中修改comments为true即可。