欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-03 23:41:16
前段时间做项目,技术栈是vue+webpack,主要就是官网首页加后台管理系统 根据当时情况,分析出三种方案 一个项目代码里面嵌两个spa应用(官网和后台系统...

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多页面开发和打包正确处理方法,希望对大家有所帮助