新代数控系统使用期限密码破解

新代数控系统使用期限密码破解年前开始负责新项目开发,是一个h5内嵌到企业*。技术栈是 vite2.x + vue3.x。随着业务的开展,版本迭代,页面越来越多,第三方依赖也越来越多,打出来的包也越来越大。针对这个问题,很容易就会想到分包这个解决方案。根据 vite 文档 提示,做了 vendor 分包之外,还对路由引用的组件做了异步加载处理,也会产生独立分包。这种配置在某个阶段是没问题的。

遇到问题

• 在 vite 配置文件,通过 build.rollupOptions.output.manualChunks 配合手动分包策略之后,vite 不会自动生成 vendor包

• 当页面越来越多,配置了动态引入页面之后,打包出来会产生 chunk碎片,如几个页面公用的文件 api.js sdkUtils.js http.js 等,这些独立的分包大小都很小,加起来 gzip 之后都不到 1kb,增加了网络请求。

*终解决方案

经过阅读源码,以及文档,分析了vite和rollup的分包策略,*得出这个解决方案:

rollupOptions: {  output: {    manualChunks(id: any, { getModuleInfo }) {      const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`;      const cssLangRE = new RegExp(cssLangs);      const isCSSRequest = (request: string): boolean =>
       cssLangRE.test(request);        // 分vendor包
     if (
       id.includes('node_modules') &&
       !isCSSRequest(id) &&        staticImportedByEntry(id, getModuleInfo, cache.cache)
     ) {        return 'vendor';
     } else if (        // 分manifest包,解决chunk碎片问题
       ((getModuleInfo(id).importers.length + getModuleInfo(id).dynamicImporters.length) > 1) &&
       id.includes('src')
     ) {        return 'manifest';
     }
   }
 }
}
export class SplitVendorChunkCache {  constructor() {    this.cache = new Map();
 }  reset() {    this.cache = new Map();
 }
}export function staticImportedByEntry(
 id,
 getModuleInfo,
 cache,
 importStack = []) {  if (cache.has(id)) {    return !!cache.get(id);
 }  if (importStack.includes(id)) {
   cache.set(id, false);    return false;
 }  const mod = getModuleInfo(id);  if (!mod) {
   cache.set(id, false);    return false;
 }  if (mod.isEntry) {
   cache.set(id, true);    return true;
 }  const someImporterIs = mod.importers.some((importer) =>
   staticImportedByEntry(
     importer,
     getModuleInfo,
     cache,
     importStack.concat(id)
   )
 );
 cache.set(id, someImporterIs);  return someImporterIs;
}

下面来看看当时是如何分析,以及一步一步来揭开默认分包策略的神秘面纱。

分析

vite2.x 什么情况下可以触发 vendor 包的生成?

经过测试,在 vite 配置文件,通过 build.rollupOptions.output.manualChunks 配合手动分包策略之后,不会自动生成vendor包。想要知道更清晰 vite 在什么情况会分 vendor 包,什么时候不会分 vendor 包,需要打开源码看清楚。

// vite// packages\vite\src\node\plugins\splitVendorChunk.tsreturn {    name: 'vite:split-vendor-chunk',    config(config) {      let outputs = config?.build?.rollupOptions?.output
     if (outputs) {
       outputs = Array.isArray(outputs) ? outputs : [outputs]        for (const output of outputs) {          const viteManualChunks = createSplitVendorChunk(output, config)          if (viteManualChunks) {            if (output.manualChunks) {              if (typeof output.manualChunks === 'function') {                const userManualChunks = output.manualChunks
               output.manualChunks = (id: string, api: GetManualChunkApi) => {                  return userManualChunks(id, api) ?? viteManualChunks(id, api)
               }
             }              // else, leave the object form of manualChunks untouched, as
             // we can't safely replicate rollup handling.
           } else {
             output.manualChunks = viteManualChunks
           }
         }
       }
     } else {