From aa73a982d7aa67967f843308e815a599a2acd688 Mon Sep 17 00:00:00 2001 From: sevichecc <91365763+Sevichecc@users.noreply.github.com> Date: Sun, 16 Oct 2022 17:06:46 +0800 Subject: [PATCH] new post --- urara/2022-10-16-vue-lazyloading/+page.md | 19 +++++ vite.config.ts.timestamp-1664805410533.mjs | 95 ---------------------- 2 files changed, 19 insertions(+), 95 deletions(-) create mode 100644 urara/2022-10-16-vue-lazyloading/+page.md delete mode 100644 vite.config.ts.timestamp-1664805410533.mjs diff --git a/urara/2022-10-16-vue-lazyloading/+page.md b/urara/2022-10-16-vue-lazyloading/+page.md new file mode 100644 index 00000000..59c71282 --- /dev/null +++ b/urara/2022-10-16-vue-lazyloading/+page.md @@ -0,0 +1,19 @@ +--- +title: 阅读 · vue用箭头函数懒加载组件的原理 +created: 2022-10-16 +summary: Promise + Dynamic Import + Webpack +tags: + - Vue +--- + +- [JS 懒加载，预加载 - 掘金](https://juejin.cn/post/6863295010591375373) + > vue 中的延迟加载是通过 webpack 代码拆分组件实现的。 +- [解密 Vue 路由懒加载\_跟小猿学前端的博客-CSDN 博客](https://blog.csdn.net/weixin_43742274/article/details/107202322) + > 路由懒加载的实现方式主要是利用 Promise 对象和 Webpack 打包时的特性（webpack 在打包项目的时候会根据你的配置文件将项目进行模块划分），利用箭头函数成功将不同的路由组件划分成为不同的模块，实现按需引入，不需要一次性全量加载，优化性能，降低首屏加载的时延 +- [【译】ES6 的工厂函数](https://www.jianshu.com/p/9ce26a5044e6) + > 工厂函数是一个最后返回值是对象的函数，但它既不是类，也不是构造函数。在 JavaScript 中，任何函数都可以返回一个对象。但当函数没有使用 new 关键字时，那它便是一个工厂函数。 +- [一文搞懂 Dynamic Import 和 Top-level await 提案 - 掘金](https://juejin.cn/post/6844904126535434253) + + > 通过动态 import 允许我们按需加载 JavaScript 模块，而不会在最开始的时候就将全部模块加载。 + + > 动态 import 返回了一个 Promise 对象，这也意味着可以在 then 中等模块加载成功后去做一些操作。 diff --git a/vite.config.ts.timestamp-1664805410533.mjs b/vite.config.ts.timestamp-1664805410533.mjs deleted file mode 100644 index 008fddb3..00000000 --- a/vite.config.ts.timestamp-1664805410533.mjs +++ /dev/null @@ -1,95 +0,0 @@ -// vite.config.ts -import { defineConfig } from "vite"; -import UnoCSS from "unocss/vite"; -import { presetTagify, presetIcons, extractorSvelte } from "unocss"; -import { VitePWA } from "vite-plugin-pwa"; -import { sveltekit } from "@sveltejs/kit/vite"; -import TailwindCSS from "tailwindcss"; - -// tailwind.config.ts -import typography from "@tailwindcss/typography"; -import daisyui from "daisyui"; -var tailwind_config_default = { - content: ["./src/**/*.{html,md,js,svelte,ts}"], - theme: { - extend: {} - }, - plugins: [typography, daisyui], - daisyui: { - themes: [ - "light", - "dark", - "cupcake", - "bumblebee", - "emerald", - "corporate", - "synthwave", - "retro", - "cyberpunk", - "valentine", - "halloween", - "garden", - "forest", - "aqua", - "lofi", - "pastel", - "fantasy", - "wireframe", - "black", - "luxury", - "dracula", - "cmyk", - "autumn", - "business", - "acid", - "lemonade", - "night", - "coffee", - "winter" - ] - } -}; - -// vite.config.ts -import autoprefixer from "autoprefixer"; -import cssnano from "cssnano"; -var vite_config_default = defineConfig({ - envPrefix: "URARA_", - css: { - postcss: { - plugins: [ - TailwindCSS(tailwind_config_default), - autoprefixer(), - ...process.env.NODE_ENV === "production" ? [ - cssnano({ - preset: ["default", { discardComments: { removeAll: true } }] - }) - ] : [] - ] - } - }, - plugins: [ - UnoCSS({ - include: [/\.svelte$/, /\.md?$/, /\.ts$/], - extractors: [extractorSvelte], - presets: [ - presetTagify({ - extraProperties: (matched) => matched.startsWith("i-") ? { display: "inline-block" } : {} - }), - presetIcons({ scale: 1.5 }) - ] - }), - VitePWA({ - srcDir: "./build", - outDir: "./.svelte-kit/output/client", - registerType: "autoUpdate", - scope: "/", - base: "/" - }), - sveltekit() - ] -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAidGFpbHdpbmQuY29uZmlnLnRzIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL3NldmljaGUvRG9jdW1lbnRzL1VyYXJhXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvc2V2aWNoZS9Eb2N1bWVudHMvVXJhcmEvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL3NldmljaGUvRG9jdW1lbnRzL1VyYXJhL3ZpdGUuY29uZmlnLnRzXCI7Ly8gdml0ZSBkZWZpbmUgY29uZmlnXG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJ1xuLy8gdml0ZSBwbHVnaW5cbmltcG9ydCBVbm9DU1MgZnJvbSAndW5vY3NzL3ZpdGUnXG5pbXBvcnQgeyBwcmVzZXRUYWdpZnksIHByZXNldEljb25zLCBleHRyYWN0b3JTdmVsdGUgfSBmcm9tICd1bm9jc3MnXG5pbXBvcnQgeyBWaXRlUFdBIH0gZnJvbSAndml0ZS1wbHVnaW4tcHdhJ1xuaW1wb3J0IHsgc3ZlbHRla2l0IH0gZnJvbSAnQHN2ZWx0ZWpzL2tpdC92aXRlJ1xuLy8gcG9zdGNzcyAmIHRhaWx3aW5kY3NzXG5pbXBvcnQgVGFpbHdpbmRDU1MgZnJvbSAndGFpbHdpbmRjc3MnXG5pbXBvcnQgdGFpbHdpbmRDb25maWcgZnJvbSAnLi90YWlsd2luZC5jb25maWcnXG5pbXBvcnQgYXV0b3ByZWZpeGVyIGZyb20gJ2F1dG9wcmVmaXhlcidcbmltcG9ydCBjc3NuYW5vIGZyb20gJ2Nzc25hbm8nXG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIGVudlByZWZpeDogJ1VSQVJBXycsXG4gIGNzczoge1xuICAgIHBvc3Rjc3M6IHtcbiAgICAgIHBsdWdpbnM6IFtcbiAgICAgICAgVGFpbHdpbmRDU1ModGFpbHdpbmRDb25maWcgYXMgYW55KSBhcyBhbnksXG4gICAgICAgIGF1dG9wcmVmaXhlcigpLFxuICAgICAgICAuLi4ocHJvY2Vzcy5lbnYuTk9ERV9FTlYgPT09ICdwcm9kdWN0aW9uJ1xuICAgICAgICAgID8gW1xuICAgICAgICAgICAgICBjc3NuYW5vKHtcbiAgICAgICAgICAgICAgICBwcmVzZXQ6IFsnZGVmYXVsdCcsIHsgZGlzY2FyZENvbW1lbnRzOiB7IHJlbW92ZUFsbDogdHJ1ZSB9IH1dXG4gICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICBdXG4gICAgICAgICAgOiBbXSlcbiAgICAgIF1cbiAgICB9XG4gIH0sXG4gIHBsdWdpbnM6IFtcbiAgICBVbm9DU1Moe1xuICAgICAgaW5jbHVkZTogWy9cXC5zdmVsdGUkLywgL1xcLm1kPyQvLCAvXFwudHMkL10sXG4gICAgICBleHRyYWN0b3JzOiBbZXh0cmFjdG9yU3ZlbHRlXSxcbiAgICAgIHByZXNldHM6IFtcbiAgICAgICAgcHJlc2V0VGFnaWZ5KHtcbiAgICAgICAgICBleHRyYVByb3BlcnRpZXM6IChtYXRjaGVkOiBzdHJpbmcpID0+IChtYXRjaGVkLnN0YXJ0c1dpdGgoJ2ktJykgPyB7IGRpc3BsYXk6ICdpbmxpbmUtYmxvY2snIH0gOiB7fSlcbiAgICAgICAgfSksXG4gICAgICAgIHByZXNldEljb25zKHsgc2NhbGU6IDEuNSB9KVxuICAgICAgXVxuICAgIH0pLFxuICAgIFZpdGVQV0Eoe1xuICAgICAgc3JjRGlyOiAnLi9idWlsZCcsXG4gICAgICBvdXREaXI6ICcuLy5zdmVsdGUta2l0L291dHB1dC9jbGllbnQnLFxuICAgICAgcmVnaXN0ZXJUeXBlOiAnYXV0b1VwZGF0ZScsXG4gICAgICBzY29wZTogJy8nLFxuICAgICAgYmFzZTogJy8nXG4gICAgfSksXG4gICAgc3ZlbHRla2l0KClcbiAgXVxufSlcbiIsICJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL3NldmljaGUvRG9jdW1lbnRzL1VyYXJhXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvc2V2aWNoZS9Eb2N1bWVudHMvVXJhcmEvdGFpbHdpbmQuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9zZXZpY2hlL0RvY3VtZW50cy9VcmFyYS90YWlsd2luZC5jb25maWcudHNcIjsvLyBAdHMtaWdub3JlIENvdWxkIG5vdCBmaW5kIGEgZGVjbGFyYXRpb24gZmlsZSBmb3IgbW9kdWxlICdAdGFpbHdpbmRjc3MvdHlwb2dyYXBoeScuXG5pbXBvcnQgdHlwb2dyYXBoeSBmcm9tICdAdGFpbHdpbmRjc3MvdHlwb2dyYXBoeSdcbi8vIEB0cy1pZ25vcmUgQ291bGQgbm90IGZpbmQgYSBkZWNsYXJhdGlvbiBmaWxlIGZvciBtb2R1bGUgJ2RhaXN5dWknLlxuaW1wb3J0IGRhaXN5dWkgZnJvbSAnZGFpc3l1aSdcblxuZXhwb3J0IGRlZmF1bHQge1xuICBjb250ZW50OiBbJy4vc3JjLyoqLyoue2h0bWwsbWQsanMsc3ZlbHRlLHRzfSddLFxuICB0aGVtZToge1xuICAgIGV4dGVuZDoge31cbiAgfSxcbiAgcGx1Z2luczogW3R5cG9ncmFwaHksIGRhaXN5dWldLFxuICBkYWlzeXVpOiB7XG4gICAgdGhlbWVzOiBbXG4gICAgICAnbGlnaHQnLFxuICAgICAgJ2RhcmsnLFxuICAgICAgJ2N1cGNha2UnLFxuICAgICAgJ2J1bWJsZWJlZScsXG4gICAgICAnZW1lcmFsZCcsXG4gICAgICAnY29ycG9yYXRlJyxcbiAgICAgICdzeW50aHdhdmUnLFxuICAgICAgJ3JldHJvJyxcbiAgICAgICdjeWJlcnB1bmsnLFxuICAgICAgJ3ZhbGVudGluZScsXG4gICAgICAnaGFsbG93ZWVuJyxcbiAgICAgICdnYXJkZW4nLFxuICAgICAgJ2ZvcmVzdCcsXG4gICAgICAnYXF1YScsXG4gICAgICAnbG9maScsXG4gICAgICAncGFzdGVsJyxcbiAgICAgICdmYW50YXN5JyxcbiAgICAgICd3aXJlZnJhbWUnLFxuICAgICAgJ2JsYWNrJyxcbiAgICAgICdsdXh1cnknLFxuICAgICAgJ2RyYWN1bGEnLFxuICAgICAgJ2NteWsnLFxuICAgICAgJ2F1dHVtbicsXG4gICAgICAnYnVzaW5lc3MnLFxuICAgICAgJ2FjaWQnLFxuICAgICAgJ2xlbW9uYWRlJyxcbiAgICAgICduaWdodCcsXG4gICAgICAnY29mZmVlJyxcbiAgICAgICd3aW50ZXInXG4gICAgXVxuICB9XG59XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQ0EsU0FBUyxvQkFBb0I7QUFFN0IsT0FBTyxZQUFZO0FBQ25CLFNBQVMsY0FBYyxhQUFhLHVCQUF1QjtBQUMzRCxTQUFTLGVBQWU7QUFDeEIsU0FBUyxpQkFBaUI7QUFFMUIsT0FBTyxpQkFBaUI7OztBQ1B4QixPQUFPLGdCQUFnQjtBQUV2QixPQUFPLGFBQWE7QUFFcEIsSUFBTywwQkFBUTtBQUFBLEVBQ2IsU0FBUyxDQUFDLG1DQUFtQztBQUFBLEVBQzdDLE9BQU87QUFBQSxJQUNMLFFBQVEsQ0FBQztBQUFBLEVBQ1g7QUFBQSxFQUNBLFNBQVMsQ0FBQyxZQUFZLE9BQU87QUFBQSxFQUM3QixTQUFTO0FBQUEsSUFDUCxRQUFRO0FBQUEsTUFDTjtBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxJQUNGO0FBQUEsRUFDRjtBQUNGOzs7QURsQ0EsT0FBTyxrQkFBa0I7QUFDekIsT0FBTyxhQUFhO0FBRXBCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFdBQVc7QUFBQSxFQUNYLEtBQUs7QUFBQSxJQUNILFNBQVM7QUFBQSxNQUNQLFNBQVM7QUFBQSxRQUNQLFlBQVksdUJBQXFCO0FBQUEsUUFDakMsYUFBYTtBQUFBLFFBQ2IsR0FBSSxRQUFRLElBQUksYUFBYSxlQUN6QjtBQUFBLFVBQ0UsUUFBUTtBQUFBLFlBQ04sUUFBUSxDQUFDLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxXQUFXLEtBQUssRUFBRSxDQUFDO0FBQUEsVUFDOUQsQ0FBQztBQUFBLFFBQ0gsSUFDQSxDQUFDO0FBQUEsTUFDUDtBQUFBLElBQ0Y7QUFBQSxFQUNGO0FBQUEsRUFDQSxTQUFTO0FBQUEsSUFDUCxPQUFPO0FBQUEsTUFDTCxTQUFTLENBQUMsYUFBYSxVQUFVLE9BQU87QUFBQSxNQUN4QyxZQUFZLENBQUMsZUFBZTtBQUFBLE1BQzVCLFNBQVM7QUFBQSxRQUNQLGFBQWE7QUFBQSxVQUNYLGlCQUFpQixDQUFDLFlBQXFCLFFBQVEsV0FBVyxJQUFJLElBQUksRUFBRSxTQUFTLGVBQWUsSUFBSSxDQUFDO0FBQUEsUUFDbkcsQ0FBQztBQUFBLFFBQ0QsWUFBWSxFQUFFLE9BQU8sSUFBSSxDQUFDO0FBQUEsTUFDNUI7QUFBQSxJQUNGLENBQUM7QUFBQSxJQUNELFFBQVE7QUFBQSxNQUNOLFFBQVE7QUFBQSxNQUNSLFFBQVE7QUFBQSxNQUNSLGNBQWM7QUFBQSxNQUNkLE9BQU87QUFBQSxNQUNQLE1BQU07QUFBQSxJQUNSLENBQUM7QUFBQSxJQUNELFVBQVU7QUFBQSxFQUNaO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K