🐛 优化脚本运行框架注入速度 #232

Author: CodFrm

package.json

@@ -7,9 +7,10 @@
   "scripts": {
     "test": "jest --coverage",
     "lint": "eslint --ext .js,.ts,.tsx src/",
-    "dev": "webpack --mode development --config ./webpack/webpack.dev.ts",
-    "build": "webpack --mode production --config ./webpack/webpack.prod.ts && concurrently \"npm run build:linter\" \"npm run build:no-split\"",
+    "dev": "concurrently \"webpack --mode development --config ./webpack/webpack.dev.ts\" \"webpack --mode development --config ./webpack/webpack.inject.ts\"",
+    "build": "webpack --mode production --config ./webpack/webpack.prod.ts && concurrently \"npm run build:linter\" \"npm run build:inject && npm run build:no-split\"",
     "build:linter": "webpack --mode production --config ./webpack/webpack.linter.ts",
+    "build:inject": "webpack --mode production --config ./webpack/webpack.inject.ts",
     "build:no-split": "webpack --mode production --config ./webpack/webpack.no.split.ts",
     "dev:linter": "webpack --mode development --config ./webpack/webpack.linter.dev.ts",
     "pack": "node ./build/pack.js",

src/content.ts

@@ -3,6 +3,9 @@ import MessageWriter from "./app/logger/message_writer";
 import MessageContent from "./app/message/content";
 import MessageInternal from "./app/message/internal";
 import ContentRuntime from "./runtime/content/content";
+// @ts-ignore
+import injectJs from "../dist/inject.js";
+import { randomString } from "./pkg/utils/utils";
 
 const internalMessage = new MessageInternal("content");
 
@@ -12,9 +15,19 @@ const logger = new LoggerCore({
   labels: { env: "content", href: window.location.href },
 });
 
+const scriptFlag = randomString(8);
+
+// 注入运行框架
+const temp = document.createElementNS("http://www.w3.org/1999/xhtml", "script");
+temp.setAttribute("type", "text/javascript");
+temp.innerHTML = `(function (ScriptFlag) {\n${injectJs}\n})('${scriptFlag}')`;
+temp.className = "injected-js";
+document.documentElement.appendChild(temp);
+temp.remove();
+
 internalMessage.syncSend("pageLoad", null).then((resp) => {
   logger.logger().debug("content start");
   // 通过flag与inject建立通讯
-  const contentMessage = new MessageContent(resp.flag, true);
+  const contentMessage = new MessageContent(scriptFlag, true);
   new ContentRuntime(contentMessage, internalMessage).start(resp);
 });

src/runtime/background/runtime.ts

@@ -67,8 +67,6 @@ export default class Runtime extends Manager {
 
   logger: Logger;
 
-  scriptFlag: string;
-
   match: UrlMatch<ScriptRunResouce> = new UrlMatch();
 
   include: UrlInclude<ScriptRunResouce> = new UrlInclude();
@@ -90,7 +88,6 @@ export default class Runtime extends Manager {
     this.scriptDAO = new ScriptDAO();
     this.resourceManager = resourceManager;
     this.valueManager = valueManager;
-    this.scriptFlag = randomString(8);
     this.logger = LoggerCore.getInstance().logger({ component: "runtime" });
     ScriptManager.hook.addListener("upsert", this.scriptUpdate.bind(this));
     ScriptManager.hook.addListener("delete", this.scriptDelete.bind(this));
@@ -158,15 +155,6 @@ export default class Runtime extends Manager {
 
     // 接受消息,注入脚本
     // 获取注入源码
-    const { scriptFlag } = this;
-    let injectedSource = "";
-    fetch(chrome.runtime.getURL("src/inject.js"))
-      .then((resp) => resp.text())
-      .then((source: string) => {
-        injectedSource = dealScript(
-          `(function (ScriptFlag) {\n${source}\n})('${scriptFlag}')`
-        );
-      });
 
     // 监听菜单创建
     const scriptMenu: Map<
@@ -433,26 +421,12 @@ export default class Runtime extends Manager {
             }
           );
 
-          // 注入运行框架
-          chrome.tabs.executeScript(sender.tabId, {
-            frameId: sender.frameId,
-            code: `(function(){
-                    let temp = document.createElementNS("http://www.w3.org/1999/xhtml", "script");
-                    temp.setAttribute('type', 'text/javascript');
-                    temp.innerHTML = "${injectedSource}";
-                    temp.className = "injected-js";
-                    document.documentElement.appendChild(temp);
-                    temp.remove();
-                }())`,
-            runAt: "document_start",
-          });
-
           if (!filter.length) {
-            resolve({ flag: scriptFlag, scripts: [] });
+            resolve({ scripts: [] });
             return;
           }
 
-          resolve({ flag: scriptFlag, scripts: filter });
+          resolve({ scripts: filter });
 
           // 注入脚本
           filter.forEach((script) => {

webpack.config.ts

@@ -147,6 +147,11 @@ const config: Configuration = {
         use: ["raw-loader"],
         exclude: /node_modules/,
       },
+      {
+        test: /inject\.js$/,
+        use: ["raw-loader"],
+        include: /dist/,
+      },
       {
         test: /\.tpl$/,
         use: ["raw-loader"],

webpack/webpack.dev.ts

@@ -15,7 +15,6 @@ common.entry = {
   // @ts-ignore
   ...common.entry,
   content: `${src}/content.ts`,
-  inject: `${src}/inject.ts`,
   "editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js",
   "ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker.js",
   "linter.worker": `${src}/linter.worker.ts`,

webpack/webpack.inject.ts

@@ -0,0 +1,44 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import merge from "webpack-merge";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import CopyPlugin from "copy-webpack-plugin";
+import CompressionPlugin from "compression-webpack-plugin";
+import { CleanWebpackPlugin } from "clean-webpack-plugin";
+import common from "../webpack.config";
+
+const src = `${__dirname}/../src`;
+const dist = `${__dirname}/../dist`;
+
+// 不要分割的文件
+common.entry = {
+  inject: `${src}/inject.ts`,
+};
+
+common.output = {
+  path: `${dist}`,
+  filename: "[name].js",
+  clean: false,
+};
+
+// 取消splitChunks
+common.optimization = {};
+
+// 移除插件
+common.plugins = common.plugins!.filter(
+  (plugin) =>
+    !(
+      plugin instanceof HtmlWebpackPlugin ||
+      plugin instanceof CopyPlugin ||
+      plugin instanceof CleanWebpackPlugin
+    )
+);
+
+export default merge(common, {
+  plugins: [
+    // firefox商店文件不能大于4M, 所以需要压缩
+    new CompressionPlugin({
+      test: /ts.worker.js/,
+      deleteOriginalAssets: true,
+    }),
+  ],
+});

webpack/webpack.no.split.ts

@@ -12,7 +12,6 @@ const dist = `${__dirname}/../dist`;
 // 不要分割的文件
 common.entry = {
   content: `${src}/content.ts`,
-  inject: `${src}/inject.ts`,
   "editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js",
   "ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker.js",
 };