动态构建的多页面vue-cli模版

vue官方提供了几个vue cli的模版,但都单页面模版,然而在真实的业务场景下还是有多页面模版的需求,百度和google上都能搜索到不少单页面模版改多页面模版的文章,但是没有现成的模版可以直接用,而且多页面模版页面多了之后,首次构建的速度真的很慢,无法忍受。这里我fork了官方的单页面webpack模版,并做了动态构建的优化。

一、如何使用

//默认全局安装vue-cli

vue init xyc-cn/webpack yourProject

cd yourProject

npm run dev

访问 http://localhost:8088/pages/module/index.html 会看到熟悉的官方带v-router的webpack模版页面

访问 http://localhost:8088/pages/module/detail.html 是我写的一个示例简单页面

二、多页面构建原理

多页面构建的原理并不复杂。大概流程是这样如下

  1. 指定一个**命名规则**的文件做为入口文件(例如v_entry.js)
  2. 遍历src目录,搜索文件入口(搜索全部的v_entry.js文件,生成一个webpack entry对象)
  1. 每个入口文件新建一个htmlPlugin生成html,并且把这个入口文件夹注入到html里面

三、页面数量膨胀后构建速度慢

随着业务的发展,项目会无限地膨胀,开发构建速度慢的问题会越来越严重,博主的项目有几十个页面,每个npm run dev都到等待几十秒时间。会让人很抓狂。理想的情况是,npm run dev的时候,只构建一个页面,每次访问到新页面的时候,再重新构建这个新页面的内容。这个时候express中间件webpack-dev-middleware派上用场了,通过它我们可以实现上述的理想构建方案。流程是这样的:

  1. 修改上面图片那个入口文件json,只取第一个key value。(这样首次构建就只会构建这个entry)
 //first run only build one entry js buddle

  let keyList = Object.keys(devConfig.entry), newEntry = {}

  keyList.forEach(function (v, i) {

    if (i === 0) {

      newEntry[v] = [devConfig.entry[v], 'webpack-hot-middleware/client']

    }

  });

  devConfig.entry = newEntry;
  1. 添加一个express中间件,每当有html请求过来,就判断下这个请求有没对应的entry,有就执行第三步,没有就返回错误。
  2. 调用webpack内置的entryPlugin插件,动态添加entry并且构建。2,3步骤的代码大概像这样
  app.use(function (req, res, next) {

    let reg = req.url.match(/pages\/(\w+)\/(\w+)\.html/);

    if (reg) {

      if (fs.existsSync(pathTo.join(process.cwd(), `./src/pages/${reg[1]}/${reg[2]}/v\_entry.vue`))) {

        if (!devConfig.entry[`pages/${reg[1]}/${reg[2]}/v\_entry`]) {

          devConfig.entry[`pages/${reg[1]}/${reg[2]}/v\_entry`] = true;

          //add new entry

          complier.apply(new MultiEntryPlugin(process.cwd(),

          [`./src/pages/${reg[1]}/${reg[2]}/v\_entry`, 'webpack-hot-middleware/client'], 

          `pages/${reg[1]}/${reg[2]}/v\_entry`));

          //force build

          webpackDevMiddlewareInstance.invalidate()

        }

      } else {

        res.end('pages not found');

        return;

      }

    }

    next();

  });

最后看下效果,初次构建,只构建了detail页面的js

访问了 http://localhost:8088/pages/module/index.html 会动态添加入口并且构建

项目github : https://github.com/xyc-cn/webpack

参考资料: Webpack实战 - 使用动态 entry 改善调试体验

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

使用MagicAjax 实现无刷新Webparts

介绍MagicAjax Web.config的配置如下: <?xml version="1.0"?> <configuration> <configSecti...

232100
来自专栏菜鸟程序员

MySQL 数据备份与还原

16180
来自专栏tiane12

Windows环境下配置PHP环境遇到的目录路径问题

14630
来自专栏软件

在IntelliJ IDEA开发工具中配置git和github

主要讲解4个知识点: (1)安装git客户端(windows版本); (2)在IDEA中配置Git; (3)在IDEA中配置Github; (4)从Github...

83480
来自专栏空木白博客

服务器安装SG11扩展多版本详细教程说明

01.首先下载  sg_Loaders.zip 解压都得到一堆文件,对应你自己的服务器,windows,Linux等,这里我们以windows为例,打开Win...

2.5K40
来自专栏软件工程师成长笔记

VMwareWorkstation10.0安装CentOS7.0虚拟机

1.下载VMwareWorkstation10.0虚拟机 2.下载CentOS-7.0-1406-x86_64-DVD.iso镜像 官网下载:http://...

75430
来自专栏liulun

【图文】如何在centos上安装tomcat

先到tomcat官网下载安装包(随便下载你想要的版本) image.png 假设你现在使用的是windows系统 那么就把你下载来的压缩包解压,放到一个目录...

26480
来自专栏小狼的世界

为PHP编译imap扩展

最近为项目增加了邮箱登陆的验证,本地测试OK,部署至服务器上提示 imap_open 为未定义函数,由此可知缺少了IMAP的PHP扩展。

25410
来自专栏用户画像

Ajax 功能

11310
来自专栏北京马哥教育

只需五步,完美利用命令行工具创建LinuxMac系统下的网站备份

创建网站备份应该是一个网站管理员最为重要的日常工作之一。但现实情况是,备份这一步往往被很多人忽略,也就是说仍然有很多网管的网站安全意识较低。 所有的Linux/...

48590

扫码关注云+社区

领取腾讯云代金券