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 是我写的一个示例简单页面
多页面构建的原理并不复杂。大概流程是这样如下
随着业务的发展,项目会无限地膨胀,开发构建速度慢的问题会越来越严重,博主的项目有几十个页面,每个npm run dev都到等待几十秒时间。会让人很抓狂。理想的情况是,npm run dev的时候,只构建一个页面,每次访问到新页面的时候,再重新构建这个新页面的内容。这个时候express中间件webpack-dev-middleware派上用场了,通过它我们可以实现上述的理想构建方案。流程是这样的:
//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;
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
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。