以下代码来自 VIte 打包后 body 标签中的内容: System.import( document.getElementById("vite-legacy-entry").getAttribute("data-src") ); 可以看到,在低版本浏览器中 Vite 使用了带有 nomodule 属性的 script 标签,先加载了 polyfills 文件,确保后续代码中使用的API能正确执行,再通过 SystemJs 加载入口文件...
复制 import.meta.url;import("_").catch(()=>1);asyncfunction*g(){ } window.__vite_is_modern_browser=true;!(function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy chunks, syntax error above and the same error below should be ignored");var e=document....
vite构建核心有两套:esbuild、rollup。 esbuild构建目标为支持esm(es module)的现代浏览器,为vite项目开发环境提供了极速的开发体验。 rollup构建目标可以是esm、cjs(commonjs)等等。 那么,vite采用核心理念是推崇esm的构建目标。所以默认面向现代浏览器。如下: 如果我们想兼容不支持esm的浏览器怎么办? 插件:@vitejs...
-- 省略其它内容 --><!-- 入口 chunk --><!-- 自动预加载入口 chunk 所依赖的 chunk--> 这种适当预加载的做法会让浏览器提前下载好资源,优化页面性能。 异步Chunk 加载优化。在异步引入的 Chunk 中,通常会有一些公用的模块,如现有两个异步引入的 Chunk:A和B,而且两者有一个公共依赖 C 一般情况下,Rollup...
1)删除 script 标签里面的 nomodule,crossorigin 属性 2)删除 含有 type="module" 的 script 标签 3)删除 含有 rel="modulepreload" 的 link 标签 4)删除 id="vite-legacy-entry" 所在 script 标签里的所有内容,并将 data-src 属性换成 src 【实现步骤】 ...
一般都会携带async和 crossOrigin字样的那个标签,一般是第一个script引入,这行需要注释 step4: 进行测试 直接双击index.html,可以看到使用file协议正常运行了打包后的文件,并且没有跨域报错 img 作者:啥名都不好起 链接:https://www.jianshu.com/p/d44d14bc5344 ...
这个是硬伤,由于现在大部份浏览器还不支持直接在浏览器中,以type="module"方式,就是()访问js文件(不支持以文件服务方式打开),这种模块化的方式需要在HTTP服务器环境下才能访问,所以,如果想要在本地浏览项目也要搭建一个HTTP服务环境即可。 搭建本地服务环境可以借助一些第三方工具快速秒建,常见的本地HTTP服务器工具...
str = str.replace(/\s?crossorigin\s?/g,' '); str = str.replace(/data-src/g,'src'); if(!/type="module"/i.test(str)) resultText += str; }); fs.writeFileSync(distPath,resultText,'utf8'); console.timeEnd('转换耗时'); ...
值得注意的是,对于 preconnect 的 link 标签一般需要加上 crorssorigin(跨域标识),否则对于一些字体资源 preconnect 会失效。 1.3 Preload/Prefetch 对于一些比较重要的资源,我们可以通过 Preload 方式进行预加载,即在资源使用之前就进行加载,而不是在用到的时候才进行加载,...