基于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)实现业务程序增量打包。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180416G1OZPD00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券