记录一次关于vite打包

问题：

vue工程存在两个入口A,B,A不需要B中的资源，但是打包都打包到common.js中了，导致common.js文件很大，A入口首次加载资源很慢。

最后解决办法：

A入口和B入口分开打包，搞两个vite.config.ts。在package.json中

"build": "npm-run-all --parallel buildIndex buildLightCCBar  --continue-on-error",

 "buildIndex": "vite build --base=/service-cloud/aicc-web -l error --config ./vite.config.ts",

 "buildLightCCBar": "vite build --base=/service-cloud/aicc-web -l error --config ./vite.config.lightccbar.ts"

 

问题解决过程

1.首页加载慢，common.js文件大，有20M，压缩后也有8M，里面包含轻量级接续条不需要的其他模块的国际化,想要将这部分内容打包时给搞出去，找到一个方法
build: {
  rollupOptions: {
    output: {
      manualChunks: (id) => {
        if (id.includes('src/lang/')) {
          return 'aicclang';
        }
      };
    }
  }
}

然后发现就算给搞出去了，A入口也会请求搞出去的这部分js,首次加载资源还是不会少。
2.看到一个按需加载的思路，国际化资源按需加载 ，如：

import { createI18n } from 'vue-i18n';

export function getLanguage() {

  return cookieUtils.getCookie('u-locale');

}

const getMessages = async () => {

  const [ccmanagement, agentconsole, ccdesktop, lightccbar] = await Promise.all([

    import(`@/views/ccmanagement/lang/${language}.js`),

    import(`@/views/agentconsole/lang/agentconsole_${language}.js`),

  ]);

  const messages = {

    [language]: {

      ...ccmanagement.default,

      ...agentconsole.default,

    }

  };

  return messages;

};

let messages = {};

let language = getLanguage();

let i18n = createI18n({

  locale: language,

  globalInjection: true

});

export const createI18nInstance = async () => {

  messages = await getMessages();

  i18n.global.setLocaleMessage(language, messages[language]);

  return i18n;

};

createI18nInstance();

export default i18n;

可以根据是否是A入口是否是B入口，加载不同的国际化资源，还可以根据是什么语言，加载那一种语言的国际化。如语言选择的中文就只加载zh_CN结尾的资源，英文，西班牙语等的国际化资源都不加载。这样做了之后B入口发现一个问题

有些直接在js文件中这样定义的，国际化显示会有问题。

import i18n from '@/lang/index'

const $t = i18n.global.t

export const test= [

  {

    'value': '4',   

    'label': $t('aa.bb.cc.dd')//aa.bb.cc.dd是国际化键值

  },]

B入口有很多这样写法的国际化，这样的直接打包进了common.js文件中，在国际化文件还没请求回来的时候，这些就已经执行了，导致取不到国际化的value值，就会显示键值。

 

3.按理来说打包是从入口开始，循环找依赖然后打包的，如果A入口没有引用B入口用的模块的国际化，那就不会被打包。但事实就是被打包了，挨个排除可能的原因，如：

将A入口的main.js引入的文件挨个注释，vite.config.ts文件中的配置挨个注释，入口只保留轻量级接续条一个。

最后终于发现，main.js引入的文件A.js，A.js引入了B.js,B.js引入了aicc首页的i18n。仿佛破案了。

然后我挨个排查A入口用的依赖，将循环引用到B入口的i18n的资源都给修改替代掉。最后发现单独打包A入口，并且注释掉vite.config.ts中的1+N配置时，不会打包B入口的i18n。如果入口不止A入口或者存在1+N配置，common.js都会包含B入口的国际化。最后打算新增一个vite.config.lightccbar.ts，分两次打包。在package.json中

"build": "npm-run-all --parallel buildIndex buildLightCCBar  --continue-on-error",

    "buildIndex": "vite build --base=/service-cloud/aicc-web -l error --config ./vite.config.ts",

    "buildLightCCBar": "vite build --base=/service-cloud/aicc-web -l error --config ./vite.config.lightccbar.ts",

 vite.config.ts中

build: {

    rollupOptions: {

      input: {

       B入口

      },}}

vite.config.lightccbar.ts中

build: {

    rollupOptions: {

      input: {

       A入口

      },}}

 

最后结果：

A入口首次加载资源  从32M降低到9M   将浏览器速率调低到fast 4G,  加载时间从17s 减少到7s。