浏览代码

test(code-split): code split optimization

vben 4 年之前
父节点
当前提交
4cca007176
共有 3 个文件被更改,包括 39 次插入5 次删除
  1. 1 0
      CHANGELOG.zh_CN.md
  2. 20 0
      build/vite/optimizer.ts
  3. 18 5
      vite.config.ts

+ 1 - 0
CHANGELOG.zh_CN.md

@@ -10,6 +10,7 @@
 - 还原 antdv 默认 loading,重构 `Loading` 组件,增加`useLoading`和`v-loading`指令。并增加示例
 - i18n 支持 vscode `i18n-ally`插件
 - 新增多级路由缓存示例
+- 打包代码拆分(试验)
 
 ### ⚡ Performance Improvements
 

+ 20 - 0
build/vite/optimizer.ts

@@ -0,0 +1,20 @@
+import type { GetManualChunk, GetManualChunkApi } from 'rollup';
+
+//
+const vendorLibs: { match: string[]; output: string }[] = [
+  {
+    match: ['xlsx'],
+    output: 'xlsx',
+  },
+];
+
+// @ts-ignore
+export const configManualChunk: GetManualChunk = (id: string, api: GetManualChunkApi) => {
+  if (/[\\/]node_modules[\\/]/.test(id)) {
+    const matchItem = vendorLibs.find((item) => {
+      const reg = new RegExp(`[\\/]node_modules[\\/]_?(${item.match.join('|')})(.*)`, 'ig');
+      return reg.test(id);
+    });
+    return matchItem ? matchItem.output : null;
+  }
+};

+ 18 - 5
vite.config.ts

@@ -3,6 +3,7 @@ import { resolve } from 'path';
 
 import { modifyVars } from './build/config/lessModifyVars';
 import { createProxy } from './build/vite/proxy';
+import { configManualChunk } from './build/vite/optimizer';
 
 import globbyTransform from './build/vite/plugin/transform/globby';
 import dynamicImportTransform from './build/vite/plugin/transform/dynamic-import';
@@ -53,9 +54,11 @@ const viteConfig: UserConfig = {
   // terser options
   terserOptions: {
     compress: {
+      keep_infinity: true,
       drop_console: VITE_DROP_CONSOLE,
     },
   },
+
   define: {
     __VERSION__: pkg.version,
     // setting vue-i18-next
@@ -64,12 +67,14 @@ const viteConfig: UserConfig = {
     __VUE_I18N_FULL_INSTALL__: false,
     __INTLIFY_PROD_DEVTOOLS__: false,
   },
+
   cssPreprocessOptions: {
     less: {
       modifyVars: modifyVars,
       javascriptEnabled: true,
     },
   },
+
   // The package will be recompiled using rollup, and the new package compiled into the esm module specification will be put into node_modules/.vite_opt_cache
   optimizeDeps: {
     include: [
@@ -80,11 +85,6 @@ const viteConfig: UserConfig = {
     ],
   },
 
-  proxy: createProxy(VITE_PROXY),
-  plugins: createVitePlugins(viteEnv),
-  rollupInputOptions: {
-    plugins: createRollupPlugin(),
-  },
   transforms: [
     globbyTransform({
       resolvers: resolvers,
@@ -94,6 +94,19 @@ const viteConfig: UserConfig = {
     }),
     dynamicImportTransform(VITE_DYNAMIC_IMPORT),
   ],
+
+  proxy: createProxy(VITE_PROXY),
+
+  plugins: createVitePlugins(viteEnv),
+
+  rollupInputOptions: {
+    plugins: createRollupPlugin(),
+  },
+
+  rollupOutputOptions: {
+    compact: true,
+    manualChunks: configManualChunk,
+  },
 };
 
 export default viteConfig;