vite多页面打包学习（一）

学习一下多页面的打包

自己瞎琢磨

6911人浏览 · 2024-01-17 16:31:07

自己瞎琢磨 · 2024-01-17 16:31:07 发布

一、前期准备

首先初始化两套独立的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之中，再次打包