vite多页面打包学习(一)
学习一下多页面的打包
一、前期准备
首先初始化两套独立的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
本次的学习结束
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)