perf: decrease bundle size of entry point (#117)

laggage · laggage · commit e804e5101154 · 2023-03-16T16:10:21.000+08:00
* chore: remove unnecessary files from output package

* refactor: decrease bundle size of date-fns

* refactor: lazy load export-pdf.command.ts

* chore: fix tree shake not work

* perf: load form-data and mime lazily
diff --git a/.vscodeignore b/.vscodeignore
@@ -5,12 +5,18 @@ node_modules/**
 src/**
 .gitignore
 .yarnrc
-webpack.config.js
 vsc-extension-quickstart.md
 **/tsconfig.json
+**/tsconfig.*.json
 **/.eslintrc.json
 **/*.map
 **/*.ts
 .idea
 .github
 ui/**
+test/**
+*.mjs
+*.js
+*.sh
+.prettierignore
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1015,21 +1015,19 @@
         ]
     },
     "scripts": {
-        "compile": "webpack && npm run ui:compile",
-        "ui:compile": "webpack -c ./ui/webpack.config.mjs",
-        "watch": "webpack --watch",
+        "watch": "webpack --watch --mode=development",
         "ui:watch": "webpack watch -c ./ui/webpack.config.mjs",
         "package": "webpack --mode production --devtool hidden-source-map",
         "ui:package": "webpack --mode production --devtool hidden-source-map -c ./ui/webpack.config.mjs",
         "compile-tests": "tsc -p ./tsconfig.integration.json --outDir out",
         "test:integration:watch": "npm run compile-tests -- --watch",
         "test:integration": "npm run compile-tests && node ./out/test/runTest.js",
         "test:unit": "jest -c ./test/jest.config.mjs",
-        "pretest": "npm run compile-tests && npm run compile && npm run lint",
         "lint": "eslint src/ ui/",
         "format": "prettier --write .",
         "format-check": "prettier --check .",
-        "download-icons": "node ./download-iconfont.mjs"
+        "download-icons": "node ./download-iconfont.mjs",
+        "stats": "npm run --silent package -- --env namedChunks=true --profile --json > ./dist/stats.json && webpack-bundle-analyzer ./dist/stats.json ./dist"
     },
     "devDependencies": {
         "@cnblogs/eslint-config-typescript": "^1.0.1",
@@ -1073,20 +1071,20 @@
         "prettier": "^2.5.0",
         "style-loader": "^3.3.1",
         "tailwindcss": "^3.0.23",
-        "terser-webpack-plugin": "^5.3.6",
+        "terser-webpack-plugin": "^5.3.7",
         "ts-jest": "^29.0.5",
         "ts-loader": "^9.2.5",
         "ts-node": "^10.9.1",
         "tsconfig-paths-webpack-plugin": "^3.5.2",
         "typescript": "^4.8.4",
         "utility-types": "^3.10.0",
-        "webpack": "5.70.x",
-        "webpack-cli": "^4.8.0"
+        "webpack": "^5.76.0",
+        "webpack-cli": "^5.0.1"
     },
     "dependencies": {
         "@cnblogs/code-highlight-adapter": "^1.7.1",
         "@cnblogs/code-quality": "^2.0.2",
-        "@cnblogs/markdown-it-presets": "^1.6.1",
+        "@cnblogs/markdown-it-presets": "1.9",
         "@fluentui/react": "^8.62.4",
         "base64url": "^3.0.1",
         "blob": "^0.1.0",
diff --git a/src/commands/commands-registration.ts b/src/commands/commands-registration.ts
@@ -29,7 +29,6 @@ import { openWorkspace } from './open-workspace';
 import { setWorkspace } from './set-workspace';
 import { revealWorkspaceInOs } from './reveal-workspace-in-os';
 import { viewPostOnline } from './view-post-online';
-import { exportPostToPdf } from './pdf/export-pdf.command';
 import { pullPostRemoteUpdates } from './pull-post-remote-updates';
 import { extractImages } from './extract-images';
 import { clearPostsSearchResults, refreshPostsSearchResults, searchPosts } from './posts-list/search';
@@ -75,7 +74,9 @@ export const registerCommands = () => {
         commands.registerCommand(`${appName}.set-workspace`, setWorkspace),
         commands.registerCommand(`${appName}.reveal-workspace-in-os`, revealWorkspaceInOs),
         commands.registerCommand(`${appName}.view-post-online`, viewPostOnline),
-        commands.registerCommand(`${appName}.export-post-to-pdf`, exportPostToPdf),
+        commands.registerCommand(`${appName}.export-post-to-pdf`, (input: unknown) =>
+            import('./pdf/export-pdf.command').then(m => m.exportPostToPdf(input))
+        ),
         commands.registerCommand(`${appName}.extract-images`, extractImages),
         commands.registerCommand(`${appName}.search-posts`, searchPosts),
         commands.registerCommand(`${appName}.clear-posts-search-results`, clearPostsSearchResults),
diff --git a/src/commands/pdf/export-pdf.command.ts b/src/commands/pdf/export-pdf.command.ts
@@ -1,4 +1,4 @@
-import puppeteer from 'puppeteer-core';
+import type puppeteer from 'puppeteer-core';
 import fs from 'fs';
 import path from 'path';
 import os from 'os';
@@ -7,13 +7,13 @@ import { Post } from '../../models/post';
 import { PostFileMapManager } from '../../services/post-file-map';
 import { postService } from '../../services/post.service';
 import { extensionViews } from '../../tree-view-providers/tree-view-registration';
-import { postPdfTemplateBuilder } from './post-pdf-template-builder';
 import { chromiumPathProvider } from '../../utils/chromium-path-provider';
 import { Settings } from '../../services/settings.service';
 import { accountManager } from '../../authentication/account-manager';
 import { AlertService } from '../../services/alert.service';
 import { PostTreeItem } from '../../tree-view-providers/models/post-tree-item';
 import { PostEditDto } from '@/models/post-edit-dto';
+import { postPdfTemplateBuilder } from '@/commands/pdf/post-pdf-template-builder';
 
 const launchBrowser = async (
     chromiumPath: string
@@ -25,6 +25,7 @@ const launchBrowser = async (
     | undefined
 > => {
     try {
+        const puppeteer = (await import('puppeteer-core')).default;
         const browser = await puppeteer.launch({
             dumpio: true,
             headless: true,
@@ -177,7 +178,9 @@ const reportErrors = (errors: string[] | undefined) => {
         void window.showErrorMessage('导出pdf时遇到错误', { modal: true, detail: errors.join('\n') } as MessageOptions);
 };
 
-const exportPostToPdf = async (input: Post | PostTreeItem | Uri): Promise<void> => {
+const exportPostToPdf = async (input: Post | PostTreeItem | Uri | unknown): Promise<void> => {
+    if (!(input instanceof Post) && !(input instanceof PostTreeItem) && !(input instanceof Uri)) return;
+
     const chromiumPath = await retrieveChromiumPath();
     if (!chromiumPath) return;
 
diff --git a/src/commands/pdf/post-pdf-template-builder.ts b/src/commands/pdf/post-pdf-template-builder.ts
@@ -1,11 +1,11 @@
 import { Post } from '../../models/post';
 import { PostFileMapManager } from '../../services/post-file-map';
 import fs from 'fs';
-import { markdownItFactory } from '@cnblogs/markdown-it-presets';
 import { blogSettingsService } from '../../services/blog-settings.service';
 import { accountManager } from '../../authentication/account-manager';
 import { postCategoryService } from '../../services/post-category.service';
 import { PostCategory } from '../../models/post-category';
+import { markdownItFactory } from '@cnblogs/markdown-it-presets';
 
 export namespace postPdfTemplateBuilder {
     export const HighlightedMessage = 'markdown-highlight-finished';
diff --git a/src/commands/show-local-file-to-post-info.ts b/src/commands/show-local-file-to-post-info.ts
@@ -6,7 +6,7 @@ import { postCategoryService } from '../services/post-category.service';
 import { PostFileMapManager } from '../services/post-file-map';
 import { searchPostsByTitle } from '../services/search-post-by-title';
 import { viewPostOnline } from './view-post-online';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 
 /**
  * 本地文件所关联的博文信息
diff --git a/src/markdown/extend-markdownIt.ts b/src/markdown/extend-markdownIt.ts
@@ -1,5 +1,6 @@
 import { Settings } from '@/services/settings.service';
-import { HighlightCodeLinesPlugin, MarkdownIt, MultilineBlockquotePlugin } from '@cnblogs/markdown-it-presets';
+import { HighlightCodeLinesPlugin, MultilineBlockquotePlugin } from '@cnblogs/markdown-it-presets';
+import type { MarkdownIt } from '@cnblogs/markdown-it-presets';
 
 export const extendMarkdownIt = (md: MarkdownIt) =>
     md
diff --git a/src/models/ing.ts b/src/models/ing.ts
@@ -1,4 +1,4 @@
-import { parseISO } from 'date-fns';
+import parseISO from 'date-fns/parseISO';
 import { camelCase, isObject, mapKeys } from 'lodash-es';
 
 export enum IngSendFromType {
diff --git a/src/models/post.ts b/src/models/post.ts
@@ -1,4 +1,5 @@
-import { differenceInSeconds, parseISO } from 'date-fns';
+import differenceInSeconds from 'date-fns/differenceInSeconds';
+import parseISO from 'date-fns/parseISO';
 
 export class Post {
     id = -1;
diff --git a/src/services/image.service.ts b/src/services/image.service.ts
@@ -1,19 +1,20 @@
 import { globalContext } from './global-state';
 import { Readable } from 'stream';
-import mime from 'mime';
 import { isString, merge, pick } from 'lodash-es';
-import FormData from 'form-data';
 import httpClient from '@/utils/http-client';
 import path from 'path';
 
 class ImageService {
     async upload<T extends Readable & { name?: string; fileName?: string; filename?: string; path?: string | Buffer }>(
         file: T
     ): Promise<string> {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const FormData = (await import('form-data')).default;
         const form = new FormData();
         const { name, fileName, filename, path: _path } = file;
         const finalName = path.basename(isString(_path) ? _path : fileName || filename || name || 'image.png');
         const ext = path.extname(finalName);
+        const mime = await import('mime');
         const mimeType = mime.lookup(ext, 'image/png');
         form.append('image', file, { filename: finalName, contentType: mimeType });
         const response = await httpClient.post(`${globalContext.config.apiBaseUrl}/api/posts/body/images`, {
@@ -34,6 +35,7 @@ class ImageService {
         const response = await httpClient.get(url, { responseType: 'buffer' });
         const contentType = response.headers['content-type'] ?? 'image/png';
         name = !name ? 'image' : name;
+        const mime = await import('mime');
 
         return merge(Readable.from(response.body), {
             ...pick(response, 'httpVersion', 'headers'),
diff --git a/src/tree-view-providers/converters.ts b/src/tree-view-providers/converters.ts
@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import { homedir } from 'os';
 import { MarkdownString, ThemeIcon, TreeItem, TreeItemCollapsibleState, Uri } from 'vscode';
 import { Post } from '../models/post';
diff --git a/src/tree-view-providers/models/post-metadata.ts b/src/tree-view-providers/models/post-metadata.ts
@@ -1,5 +1,8 @@
-import { format, differenceInYears, formatDistanceStrict, differenceInSeconds } from 'date-fns';
-import { zhCN } from 'date-fns/locale';
+import differenceInSeconds from 'date-fns/differenceInSeconds';
+import differenceInYears from 'date-fns/differenceInYears';
+import format from 'date-fns/format';
+import formatDistanceStrict from 'date-fns/formatDistanceStrict';
+import zhCN from 'date-fns/locale/zh-CN';
 import { TreeItem, TreeItemCollapsibleState, ThemeIcon } from 'vscode';
 import { Post } from '../../models/post';
 import { PostEditDto } from '../../models/post-edit-dto';
diff --git a/src/utils/get-clipboard-image.ts b/src/utils/get-clipboard-image.ts
@@ -8,7 +8,7 @@ import isWsl from 'is-wsl';
 import { globalContext } from '../services/global-state';
 import { AlertService } from '../services/alert.service';
 import { IClipboardImage } from '../models/clipboard-image';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 
 export type Platform = 'darwin' | 'win32' | 'win10' | 'linux' | 'wsl';
 
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "module": "commonjs",
+        "module": "ES2020",
         "target": "ES2020",
         "moduleResolution": "node",
         "lib": ["ES2020"],
diff --git a/webpack.config.mjs b/webpack.config.mjs
@@ -16,11 +16,13 @@ const __dirname = path.dirname(__filename);
 //@ts-check
 /** @typedef {import('webpack').Configuration} WebpackConfig **/
 
-export default env => {
+export default (env, { mode }) => {
+    const isProd = mode === 'production';
+
     /** @type WebpackConfig */
     const extensionConfig = {
         target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
-        mode: 'none', // this leaves the source code as close as possible to the original (when packaging we set this to 'production')
+        mode: mode, // this leaves the source code as close as possible to the original (when packaging we set this to 'production')
 
         entry: { extension: './src/extension.ts', markdown: './src/markdown/markdown.entry.ts' }, // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
         output: {
@@ -35,20 +37,26 @@ export default env => {
         },
         resolve: {
             // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
-            extensions: ['.ts', '.js'],
+            extensions: ['.ts', '.js', '.mjs'],
             plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })],
         },
         module: {
             rules: [
                 {
                     test: /\.ts$/,
-                    exclude: /node_modules\/(?!lodash-es.*)/,
+                    exclude: /node_modules/,
                     use: [
                         {
                             loader: 'ts-loader',
                         },
                     ],
                 },
+                {
+                    test: /\.mjs/,
+                    resolve: {
+                        fullySpecified: false,
+                    },
+                },
             ],
         },
         devtool: 'nosources-source-map',
@@ -74,6 +82,10 @@ export default env => {
                 CNBLOGS_CLIENTSECRET: JSON.stringify(env.CLIENTSECRET || ''),
             }),
         ],
+        optimization: {
+            chunkIds: isProd && !env.namedChunks ? 'deterministic' : 'named',
+            usedExports: true,
+        },
     };
 
     return extensionConfig;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { parseISO } from 'date-fns';`
	`1`	`+import parseISO from 'date-fns/parseISO';`
`2`	`2`	`import { camelCase, isObject, mapKeys } from 'lodash-es';`
`3`	`3`
`4`	`4`	`export enum IngSendFromType {`