rollup/vite로 prebuild가 완성된 파일을 읽고 해석하지 않음

10696 단어 rollupVitetech
커다란 js를 만들 때 구축에 의존하지 않을 때, 대러 분석의 단계를 넘어갈 수 있습니다.또 거대한 파일을 구축해 응용 프로그램으로 그 사용자가 됐을 때 등이다.단독 행동의 거대한 모듈로 typescript와prettier를 열거할 수 있습니다.
따라서 웹 페이지라면 noparse 옵션을 통해 해석을 건너뛸 수 있지만vite/rollup은 없어서 실행할 수 있는 플러그인을 강제로 만들었습니다.
기분이 좋으면 npm에 던집니다. 설정 파일에 직접 쓸 수 있는 분량이기 때문에vite.config.ts를 여기에 놓으세요.(vite에 설정 파일을 포함하는 ts 대응)
// vite.config.ts
import type { Plugin } from "rollup";
import { defineConfig } from "vite";

const noparse = () =>
  ({
    name: "noparse",
    enforce: "pre", // for vite plugin order
    buildStart: () => console.time("noparse"),
    buildEnd: () => console.timeEnd("noparse"),
    transform(code: string, id: string) {
      if (id.endsWith("?noparse")) {
        const encoded = Buffer.from(
          unescape(encodeURIComponent(code))
        ).toString("base64");
        return {
          code: `const url = "data:text/javascript;base64," + "${encoded}";
const f = new Function("u", "return import(u)");
export default () => f(/* @vite-ignore */ url);`,
        };
      }
      if (id.endsWith("?noparse-umd")) {
        return {
          code: `const m = { exports: {}};
new Function('module', 'exports', ${JSON.stringify(code)})(m, m.exports);
export default m.exports`,
        };
      }
    },
  } as Plugin);

export default defineConfig({
  build: {
    minify: false,
    target: "esnext",
    lib: {
      entry: "src/main.ts",
      formats: ["es"],
    },
  },
  plugins: [noparse()],
});
따라서 자신의vite환경에서typescript의 구축은 9000밀리초에서 330ms로 바뀌었다.

구속


ESM의 경우 변환된 관계로 인해 비동기식 loader가 됩니다.
import load from "./esm-code.js?noparse"; // export default () => console.log('hello')
const mod = await load();
mod.default(); // => hello
ESM의 코드를 동기적으로 평가하는 방법이 없어 import("data:base64,..")로 변환되기 때문에 비동기 API가 되어야 하므로dynamic import와 같이 처리해야 한다.또한 노드 환경에서 최근 버전이 아니면 데이터uri를 평가할 수 없습니다.
베이스 64화의 원가가 없는 것도 아니기 때문에 실행 원가가 필요하다.현금으로 하면 더 빠르지 않을까...
반대로 외부 chunk화로 워치 환경의 구축이 빨라지겠죠.
cjs/umd 시new Function 동시 평가.
// --- with umd (always sync) ---
import ts from "typescript";

// noparse-umd
import ts from "typescript/lib/typescript.js?noparse-umd";
말은 그렇지만 개발할 때 사용하는 것을 구상했기 때문에 정식 환경에서 eval/new Function을 사용하는 관계에서는 사용을 피하는 것이 좋다.

그냥 noparse 갖고 싶어요.


롤러블의 issue에 이런 말을 썼다.
https://github.com/rollup/rollup/issues/3873

좋은 웹페이지 즐겨찾기