vue多页面开发和打包正确处理方法


Posted in Javascript onApril 20, 2018

vue多页面开发和打包正确处理方法

前段时间做项目,技术栈是vue+webpack,主要就是官网首页加后台管理系统 根据当时情况,分析出三种方案

  1. 一个项目代码里面嵌两个spa应用(官网和后台系统)
  2. 分开两套项目源码
  3. 一套项目源码里面就一个spa应用

思考:

  1. 直接否定了一套项目源码里一个spa应用(ui样式会相互覆盖,如果没有代码规范后期比较难维护)
  2. 两套源码的话,后台可能开两个端口,然后需要用nginx反向代理可能比较麻烦,而且前端开发也比较麻烦麻烦,毕竟需要维护两个git仓库,两套git上线流程,可能会损耗很多时间。
  3. 对自己的技术(盲目)自信,也想尝尝鲜,分析出需求也不算很复杂。选了第一种方案,就是多个单页面应用在一套源码里面

上一张多页面的结构图

vue多页面开发和打包正确处理方法 

下载vue spa模板

npm install vue-cli -g
vue init webpack multiple-vue-amazing

改造多页面应用

npm install glob --save-dev

修改src文件夹下面的目录结构

vue多页面开发和打包正确处理方法 

在util.js里面加入

/* 这里是添加的部分 ---------------------------- 开始 */
// glob是webpack安装时依赖的一个第三方模块,还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
var glob = require('glob')
// 页面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相应的页面路径,因为之前的配置,所以是src文件夹下的pages文件夹
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
// 用于做相应的merge处理
var merge = require('webpack-merge')
//多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件,如果该文件存在
// 那么就作为入口处理
exports.entries = function () {
 var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
 var map = {}
 entryFiles.forEach((filePath) => {
  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,
 // template: 'index.html',
 // 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库

npm install element-ui bootstrap-vue --save

分别在不同的页面引入不同的ui index.js

import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

admin.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

上面多页面的配置是参考网上的,而且网上的思路大都很相似,核心就是改多个entry,配置完成了之后,开发的时候也是发现不了问题的,然后大概就开发了一个月,开发完之后对官网进行性能分析时发现,webpack打包的vendor.js网络加载时间特别长,导致首屏的白屏时间非常长,最终通过-webpack-bundle-analyzer分析得到了结论

npm run build --report

vue多页面开发和打包正确处理方法 

你会发现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 文件

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor-admin',
  chunks: ['vendor'],
  minChunks: function (module, count) {
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 &&
   module.resource.indexOf('element-ui') != -1
  )
  }
 }),
 new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor-index',
  chunks: ['vendor'],
  minChunks: function (module, count) {
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 &&
   module.resource.indexOf('bootstrap-vue') != -1
  )
  }
 }),

再次分析,一切都很ok,vendor.js被分离成了vendor.js、vendor-index、vendor-admin.js

vue多页面开发和打包正确处理方法 

本来以为解决了CommonsChunkPlugin的分离vendor.js的问题,就可以了,然后打包出来发现index.html和admin.html都少了一个引入(各自对应的那个vendor-xx.js)

vue多页面开发和打包正确处理方法 

解决方案

这个问题其实就是HtmlWebpackPlugin的问题 把原来的 chunksSortMode: 'dependency'改成自定义函数的配置,如下

util.js文件

chunksSortMode: function (chunk1, chunk2) {
   var order1 = chunks.indexOf(chunk1.names[0])
   var order2 = chunks.indexOf(chunk2.names[0])
   return order1 - order2
  },

最终实现

  • 每个页面加载各自的chunk
  • 每个页面有不同的参数
  • 每个页面能共享公共chunk
  • 浏览器缓存,性能更好
  • 如果还嫌慢的话,开启gzip

感想

大功告成了,虽然配置看起来很简单,不过我当时开发的时候,思考了很久,所以假如你CommonsChunkPlugin和HtmlWebpackPlugin不熟悉或者只会用别人第三方的配置表,估计会踩大坑,比如说,CommonsChunkPlugin不指定chunks,默认是什么?minChunks大多数人只会写一个数值,然而自定义一个函数的写法其实才是最强大的,根据我个人的经验chunks结合minChunks自定义函数的写法,能解决几乎所有CommonsChunkPlugin灵异的事件。

总结

以上所述是小编给大家介绍的vue多页面开发和打包正确处理方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
浅谈javascript的分号的使用
May 12 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 #Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 #Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 #Javascript
Vue中如何实现proxy代理
Apr 20 #Javascript
React diff算法的实现示例
Apr 20 #Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 #Javascript
node实现登录图片验证码的示例代码
Apr 20 #Javascript
You might like
打造计数器DIY三步曲(中)
2006/10/09 PHP
PHP数据过滤的方法
2013/10/30 PHP
ucenter通信原理分析
2015/01/09 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
Django日志模块logging的配置详解
2017/02/14 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
Python如何批量生成和调用变量
2020/11/21 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
大学军训自我鉴定
2013/12/15 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
离婚协议书范文
2015/01/26 职场文书
高考升学宴主持词
2019/06/21 职场文书
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL