在vite5.1.5 中使用 vite-plugin-cdn2 v0.15.4 构建 echarts 提示:echarts try resolve file failed。但是,其他的包都正常构建。环境macOS:14.3.1 (23D60) cpu:m3 max vite:5.1.5配置截图resolve 方法,是一个将 cdnjs 资源地址拼接完整的方法,不过,当我手动补全的时候,也是无效的。XiaoDaiGua-Ray changed...
复制代码import { createHtmlPlugin } from 'vite-plugin-html' rollupOptions: { // 告诉打包工具 在external配置的 都是外部依赖项 不需要打包 external: ['vue'], plugins: [ externalGlobals({ // "在项目中引入的变量名称":"CDN包导出的名称,一般在CDN包中都是可见的" vue: 'Vue' }) ] } plugins...
< src="https://cdn.jsdelivr.net/npm/element-plus@2.2.22/dist/index.full.min.js"></> `, echartsSciprt:'< src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></>' } } }), viteImagemin({ gifsicle: { optimizationLevel:7, interlaced:false }, optipng: { o...
2.5 配置完执行一下npm run build, 项目根目录会出现一个stats.html的文件, 用浏览器打开可以看到,目前暂用整个项目体积最大的是echarts和ant-design-vue,接下来就是想办法把他们单独拆成一个独立的文件,并且上传到CDN上面,通过配置baseUrl, 打包结果中的 index.html 只需引入这些独立的文件即可; 三、Vite如何拆...
pnpm add rollup-plugin-visualizer -D 在 `vite.config.ts` 文件中引入该插件:import { visualizer }...
"@vitejs/plugin-vue2":"2.3.1", sass 版本,建议使用 1.76,因为高于这个版本,@import 语法以及嵌套插入父元素属性的写法会被标记为不推荐,出现大量的警告。 1 "sass":"1.76", 额外的,我们很大概率为了优化首屏加载速度,可能会用到 cdn,那就使用插件 ...
"unplugin-vue-define-options":"1.1.6", "vite":"^4.3.0", "vite-plugin-cdn-import":"^0.3.5", "vite-plugin-compression":"^0.5.1", "vite-plugin-mock":"^2.9.6", "vite-plugin-remove-console":"^2.1.0", "vite-svg-loader":"^4.0.0", ...
字只需要配置即可,自动生成模板所引用的cdn路径 import importToCDN from 'vite-plugin-cdn-import' export function configCDN() { return importToCDN({ modules: [ { name: 'element-plus', var: 'ElementPlus', path: 'https://unpkg.com/element-plus/lib/index.full.js', ...
复制代码import{createHtmlPlugin}from'vite-plugin-html'rollupOptions:{// 告诉打包工具 在external配置的 都是外部依赖项 不需要打包external:['vue'],plugins:[externalGlobals({// "在项目中引入的变量名称":"CDN包导出的名称,一般在CDN包中都是可见的"vue:'Vue'})]}plugins:[createHtmlPlugin({minify:true...
因为我们最后我们要通过echarts treemap去展示可视化的打包产物树,所以我们这里去遍历bundle.modules,并重新拼装modules 数据,并转换为构建正确的依赖关系。 这里主要就是参考rollup-plugin-visualizer 里的源码生成依赖树 const modules = await Promise.all( Object.entries(bundle.modules).map(([id, { renderedLength...