vue多页面开发和打包正确处理方法
|
<p style="text-align: center"> 前段时间做项目，技术栈是vue+webpack,主要就是官网首页加后台管理系统 根据当时情况，分析出三种方案
思考：
上一张多页面的结构图 下载vue spa模板改造多页面应用修改src文件夹下面的目录结构
在util.js里面加入 {
var filename = filePath.substring(filePath.lastIndexOf('/') + 1,filePath.lastIndexOf('.'))
map[filename] = filePath
})
return map
}
//多页面输出配置
// 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中
exports.htmlPlugin = function () {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
let arr = []
entryHtml.forEach((filePath) => {
let filename = filePath.substring(filePath.lastIndexOf('/') + 1,filePath.lastIndexOf('.'))
let conf = {
// 模板来源
template: filePath,// 文件名称
filename: filename + '.html',// 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
chunks: ['manifest','vendor',filename],inject: true
}
if (process.env.NODE_ENV === 'production') {
conf = merge(conf,{
minify: {
removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true
},chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}
/* 这里是添加的部分 ---------------------------- 结束 */
webpack.base.conf.js 文件
/* 修改部分 ---------------- 开始 */
entry: utils.entries(),/* 修改部分 ---------------- 结束 */
webpack.dev.conf.js 文件
/* 注释这个区域的文件 ------------- 开始 */
// new HtmlWebpackPlugin({
// filename: 'index.html',// template: 'index.html',// inject: true
// }),/* 注释这个区域的文件 ------------- 结束 */
new FriendlyErrorsPlugin()
/* 添加 .concat(utils.htmlPlugin()) ------------------ */
].concat(utils.htmlPlugin())
webpack.prod.conf.js 文件
/* 注释这个区域的内容 ---------------------- 开始 */
// new HtmlWebpackPlugin({
// filename: config.build.index,// inject: true,// minify: {
// removeComments: true,// collapseWhitespace: true,// removeAttributeQuotes: true
// // more options:
// // https://github.com/kangax/html-minifier#options-quick-reference
// },// // necessary to consistently work with multiple chunks via CommonsChunkPlugin
// chunksSortMode: 'dependency'
// }),/* 注释这个区域的内容 ---------------------- 结束 */
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname,'../static'),to: config.build.assetsSubDirectory,ignore: ['.*']
}
])
/* 该位置添加 .concat(utils.htmlPlugin()) ------------------- */
].concat(utils.htmlPlugin())
引入第三方ui库 分别在不同的页面引入不同的ui index.js admin.js 上面多页面的配置是参考网上的，而且网上的思路大都很相似，核心就是改多个entry，配置完成了之后，开发的时候也是发现不了问题的，然后大概就开发了一个月，开发完之后对官网进行性能分析时发现，webpack打包的vendor.js网络加载时间特别长，导致首屏的白屏时间非常长，最终通过-webpack-bundle-analyzer分析得到了结论
你会发现vendor.js包含了index.html和admin.html的共同部分，所以这个vendor包注定会很大很冗余 解决思路既然是vendor过大引起加载速度慢，那就分离这个vendor就好了。我是这样想的，把各个页面中都使用到的第三方代码提取至vendor.js中，然后各个页面中用到的第三方代码再打包成各自的vendor-x.js，例如现有页面index.html、admin.html，则最终会打包出vendor.js、vendor-index.js、vendor-admin.js。 webpack.prod.conf.js 文件 再次分析，一切都很ok，vendor.js被分离成了vendor.js、vendor-index、vendor-admin.js
本来以为解决了CommonsChunkPlugin的分离vendor.js的问题，就可以了，然后打包出来发现index.html和admin.html都少了一个引入(各自对应的那个vendor-xx.js)
解决方案这个问题其实就是HtmlWebpackPlugin的问题 把原来的 chunksSortMode: 'dependency'改成自定义函数的配置，如下 util.js文件 最终实现
感想 大功告成了，虽然配置看起来很简单，不过我当时开发的时候，思考了很久，所以假如你CommonsChunkPlugin和HtmlWebpackPlugin不熟悉或者只会用别人第三方的配置表，估计会踩大坑，比如说,CommonsChunkPlugin不指定chunks，默认是什么？minChunks大多数人只会写一个数值，然而自定义一个函数的写法其实才是最强大的，根据我个人的经验chunks结合minChunks自定义函数的写法，能解决几乎所有CommonsChunkPlugin灵异的事件。 总结以上所述是小编给大家介绍的vue多页面开发和打包正确处理方法。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
