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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
JS实现时间校验的代码
May 25 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
用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
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
php排序算法实例分析
2016/10/17 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
一个超级简单的python web程序
2014/09/11 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
python 系统调用的实例详解
2017/07/11 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
Otel.com:折扣酒店预订
2017/08/24 全球购物
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Golang中异常处理机制详解
2021/06/08 Golang