一、前期准备

首先初始化两套独立的vue实例和相关生态(多页面嘛),如下

我在src文件下创建了pages大文件夹,并初始化了两套页面分别为index和page1,每套页面都有自己单独的组件、路由、状态、入口等等,这里的话在创建的时候一定注意路径要写对,说一下我的每个单个实例有什么特殊,除了初始化实例之外,我还分别写了两个页面级别的组件,indexpage1view和page1page1view组件是懒加载的,了解这个方便我们了解后续的打包结果

其次利用vite-plugin-html插件做两个template模版,具体行为可以参考该插件官网,我这里的话首先是在vite.config.js同层创建了index.html和page1两个模板,我尝试过把这两个页面模版放进一个文件夹里统一管理,但总是出错,所幸就裸奔了,如下

因为vite-plugin-html需要在html模版之中填充一些字段,比如title,script脚本等等,所以html模板里面可以放一些占位符,比如我这个简单的模版,很明显我放了一个title字段的占位符

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%- title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

下面是我对vite-plugin-html这个插件的配置对象

const newParams={
  minify:true,
  pages:[
    // 第一个页面的配置
    {
      filename:"index.html",
      template:"./index.html",
      entry:"./src/pages/index/main.js",
      injectOptions:{
        data:{
          // 这里要写你在html模板中规定的占位数据,我们这里的话只要写title
          title:"index",
          // 如果你看vite-plugin-html官网的话会发现另一个数据叫"injectScript",这个应该是其他的js脚本,比如埋点之类的
        }
      }
    },
    {
      filename:"page1.html",
      template:"./page1.html",
      entry:"./src/pages/page1/main.js",
      injectOptions:{
        data:{
          title:"page1"
        }
      }
    }
  ]
}

因为我两个html模版都是一样的,所以我尝试过在该配置的template部分使用同一个模版,结果在·打包的时候只给我创建出一个html页面,该配置的重点是entry,也就是两个htmld对应的入口文件

其他的配置也和上一篇单页面打包的时候一样,下面贴一下vite配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { createHtmlPlugin } from 'vite-plugin-html'
// 在外边给'vite-plugin-html'插件写个配置参数
// 1.下面是第一次试验的时候vite-plugin-html的参数,不太好的地方在于插入自定义数据不方便
const HTMLparms={
  minify:true,
  // 多页面的原因,pages需要写成数组去进行一些单独配置
  pages:[
    {
      filename:"index",//该项默认是template文件名
      entry:"./src/pages/index/main.js",
      template:"./index.html"
    },
    {
      filename:"page1",//该项默认是template文件名
      entry:"./src/pages/page1/main.js",
      template:"./page1.html"
    },
  ]
}
// 现在再写一个注入数据的写法,但是还是需要两个模版
// 使用模板的话需要对html模版进行一些处理,加一些占位符
const newParams={
  minify:true,
  pages:[
    // 第一个页面的配置
    {
      filename:"index.html",
      template:"./index.html",
      entry:"./src/pages/index/main.js",
      injectOptions:{
        data:{
          // 这里要写你在html模板中规定的占位数据,我们这里的话只要写title
          title:"index",
          // 如果你看vite-plugin-html官网的话会发现另一个数据叫"injectScript",这个应该是其他的js脚本,比如埋点之类的
        }
      }
    },
    {
      filename:"page1.html",
      template:"./page1.html",
      entry:"./src/pages/page1/main.js",
      injectOptions:{
        data:{
          title:"page1"
        }
      }
    }
  ]
}
  
// https://vitejs.dev/config/
export default defineConfig({
  // 插件部分
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    createHtmlPlugin(newParams)
  ],
  // 打包配置
  build: {
    minify:false,//暂时不开启压缩方便查看
    cssCodeSplit: true,
    emptyOutDir: true,
    sourcemap: false,
    assetsDir: 'assets', // 默认 assets
    outDir: 'dist',      // 默认 dist
    rollupOptions: {
        output: {
            compact: true,
            entryFileNames: "static/js/[name]-[hash].js",
            chunkFileNames: "static/js/[name]-[hash].js",
            assetFileNames: "static/[ext]/[name].[ext]",
        }
    }
},
// 其他配置
base:"./"
})

二、打包的结果

如下图

第一感觉就是命名看着很乱,一共五个js文件,前两个分别对应两个单页面应用的index页面,后面两个是懒加载页面级别的组件,最后则多了一个vue开头的js包,我没有开压缩,可以进到这个包里看有哪些共同内容

看到了如下内容

可以看到在这个共享包里,找到了vue相关和我在两个页面都引入的element-plus的一个按钮,也就是说他自动把我们划分了好了共享的chunk 

我们再看一下以vue命名的css文件,其中有

可以看到是两个部分,第一部分是main.js接口引入的初始化的css文件,第二个则是element部分的css,又是自动分析了共享css的内容

三、优化一下

其实我们可以看到rollup之中的打包策略,除了你写的两组index、page1这样的页面、懒加载的内容,其他内容会被打包在另一个公有的chunk中

首先我不太满意那两个共享js/css文件的vue开头,改成vendor多好啊。这里其实有一个简单的改法,直接手动修改,但是这样我怕修改漏了,所以打算自己控制一下chunk的命名,看了一下rollup配置的官网,要用到manualChunks这个属性,该属性可以是一个函数,控制chunk的命名(实际上css也被控制了),其参数是id,我打印了一下,是被打包文件的绝对路径,顺带也看了一下哪些文件会被打包,结果是node_modules、src中的文件和vite、rollup之中的插件都会被打包。

首先尝试一下,将node_modules包中所有的内容放入vendor,在rollup设置里面写一个如下的配置

manualChunks:(id)=>{
  if (id.includes('node_modules')) {
     return "vendor"
  }
}

打包结果如下

可以看到vue这个包还是没有消掉,进入相关包可以发现,实际上这个操作将之前vue-[hash].js的内容分成了两部分,属于node_modules的内容单独打包出来了,剩下来的内容还是放在vue-[hash].js之中,vue.css也是如此,之前的element-plus的样式被单独放到了vendor.css之中,初始化样式则还是存放在vue.css之中,截一个css的图吧,方便理解

 

 其实这样的打包我觉得挺好的,vendor之中的内容都是不改变的,程序员所写的页面之中的内容是有改动,其他的内容都打包在vue开头的文件之中,但是这个vue的名称我不是很喜欢,vue.css是公共的内容,应该命名成common.css,vue-[hash].js的内容应该改成others

这里还是贴一下vue-[hash].js的内容吧

 一个自执行函数,创建了一些link标签,很明显属于打包之后的构建的内容。

四、最后改一下chunk的名字

 我们先打印一下不在node_modules之中的模块,可以写这样的一个函数去打印

 manualChunks: (id) => {
        if (id.includes('node_modules')) {
          return "vendor"
        }else{
          console.log(id);
        }
      }

结果如下

可以发现除了正常的src里面的内容之外,还有commonjsHelpers.js、vite/preload-helper等这样的构建内容,那这样的内容呢就打包到other-[hash].js这样的内容中去,这些包的主要特征就是不是以“D:/”开头,那我们写如下的一个配置吧

manualChunks: (id) => {
        if(!id.startsWith("D:/")){
          return "other"
        }
        
        if (id.includes('node_modules')) {
          return "vendor"
        }
        if(id.includes('src/assets/css/common.css')){
          return "common"
        }
      }

打包结果如下

css部分基本上没啥问题了,但是js部分的这个vue-5e3b395f.js还在呢,我们可以看一下为啥还在

 

可以看到原来是svg图片的创建部分的内容,所以我们这边继续改一下

 manualChunks: (id) => {
        if(!id.startsWith("D:/")||id.includes("/assets/pic")){
          return "other"
        }
        
        if (id.includes('node_modules')) {
          return "vendor"
        }
        if(id.includes('src/assets/css/common.css')){
          return "common"
        }
      }

 顺带把需要打包进的图片都放到assets/pic之中,再次打包

好,这次我们终于按照自己的意愿粗暴地驯服了vite

本次的学习结束 

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐