基于vue_cli配置多页面实现增量打包

内容来源：平台研发部 卢凯 原创

一、Vue_cli 生成的页面目录及打包情况：

最近在学习webpack 打包的过程中，发现使用用vue_cli 生成的SPA程序打包存在很多问题：

首先，用vue_cli 生成的SPA目录及打包结果如下：

（1）通过 build/webpack.base.conf.js的配置可以看出，项目的的入口文件只有一个./src/main.js，打包也只有一个index.html，上传服务器时，加载index.html时需要下载css和js导致首屏加载时间长，随着项目文件的增加，愈加不容忽视；

（2）没有进行Code Splitting，出现重复打包，打包文件过大等问题；

（3）所有静态资源文件全都放在static目录下，每次图片修改，需要打包整个目录并替换随着项目文件的增加，这种做法并不可取；

二、配置Code Splitting实现分离第三方插件，公共组件:

通过code splitting分离打包，将第三方插件与业务代码分离，利用浏览器缓存，减少异步加载；

（1）第三方类库单独打包。由于第三方类库的内容基本不会改变，可以将其与业务代码分离出来，这样就可以将类库代码缓存在客户端，减少请求。

（2）按需加载。webpack支持定义分割点，通过require.ensure进行按需加载。

（3）通用模块单独打包。我们代码中可能会有一些通用模块，比如弹窗、分页、通用的方法等等。其他业务代码模块常常会有引用这些通用模块，会造成通用模块重复打包，这时可以将通用模块单独打包出来。

上图是配置Code Splitting的打包结果，利用wepack自带的Bundle Analyzer插件分析：

可以看到打包文件被打包的更细了，切割成了很多chunks，但仍然存在jquery重复打包的问题；接下来来看一下我是如何配置来切割：

要配置切割我们需要一个插件CommonsChunksPlugin；

首先定义我们的chunks：

使用CommonsChunksPlugin提取公共部分：

这样我们就合理利用浏览器的缓存，也可以在每次上传服务器时，只替换业务代码；

打开dist/index.html，发现浏览器报错。打开index.html发现是因为代码切割，没有自动引入所有的css和js。手动添加之后，项目完美运行。觉得每次手动添加过于繁琐，寻求是否有更加优雅的解决办法：

三、配置多页面:

多次碰壁之后，发现要实现增量打包，关键在于入口文件，SPA的入口文件是唯一的，只有一个。想要生成多个文件，只能增加多个入口文件：

vue在工程化开发的时候很依赖webpack，而webpack是将所有的资源整合到一块，弄成一个单页面。但是vue不止可以做单页面，它还可以做多页面，如果要做多页面的话需要对他的依赖，也就是webpack就是重新配置才可以:

（1）首先在build/webpack.dev.conf.js和build/webpack.prod.conf.js添加多页，并为每个页面配置chunk：

（3）最后我们可以定义的entries

node-glob用来获取路径，支持用*来获取该路径下的所有文件；此时，entries作为变量，只是在初始打包时，打包所有，更改业务代码时，只需要打包该页面；

通过配置多页面的打包结果如下：

此时，由于我们的入口文件有三个，打包也打包出index.html、list.html、router.html三个页面；

这是多页面的目录结构：

（1）所有封装组件在component下。

（2）module目录下又分为index、list、router三个独立的页面。

（3）每个页面中有单独的App.vue、*.html、*.js，我们可以把该页面的静态资源文件放在改页面下，也可以把改页面的组件放在改目录下的views文件夹中。

（4）每个页面都有一个App.vue来配置当前页，因此每个页面都是一个单独的SPA程序，多个页面之间就是简单的MPA跳转。

（5）每个SPA都可以配置自己的路由，这样我们又可以利用路由来展现单页面的优势。

这样就完成了基于vue_cli配置多页面并实现增量打包。

发现多页面完美解决大型SPA程序的缺点：

（1）将SPA细化为多个小的SPA，打包为多个页面文件，避免首屏加载慢。

（2）将静态资源文件分配到每个页面，避免每次打包所有。

（3）实现业务程序增量打包。