Vue 是单页面应用,可能会有很多的路由引入 ,这样使用 webpcak 打包后的文件很大,当进入首页时,加载的资源过多,页面会出现白屏的情况,不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了。这样会大大提高首屏显示的速度,但是可能其他的页...
而vue-demi是哪里来的呢,我的项目是由于element-plus引用了vue-demi,所以此时解决方案就是将vue-demi也用cdn引入。 配置详情 // vite.config.jsimport{defineConfig}from'vite'import{createHtmlPlugin}from'vite-plugin-html'importviteImageminfrom'vite-plugin-imagemin'importexternalGlobalsfrom'rollup-plugin-externa...
// 告诉打包工具 在external配置的 都是外部依赖项 不需要打包 external: ['vue','element-plus','echarts'], plugins: [ externalGlobals({ vue:'Vue', 'element-plus':'ElementPlus', echarts:'echarts', 'vue-demi':'VueDemi' }), viteCompression({ verbose:true,// 是否在控制台中输出压缩结果 ...
},// 告诉打包工具 在external配置的 都是外部依赖项 不需要打包external: ['vue','element-plus','crypto-js'],plugins: [externalGlobals({vue:'Vue','element-plus':'ElementPlus','crypto-js':'CryptoJS'}),viteCompression({verbose:true,// 是否在控制台中输出压缩结果disable:false,threshold:10240,/...
我们常见的element-Plus,在我们考虑到包体积大小时,经常会使用按需引入和自动导入,这两种方式虽然极大的解决了包体积的问题,但是并不是最优化的方案,我们可以来对比一下 这张是用自动导入的,可以看打包时间为5s多 这张是用CDN的,打包只用1s多 可以看到用CDN的速度要快很多,接下来看看用法 用自动导入的就不说了,...
而vue-demi是哪里来的呢,我的项目是由于element-plus引用了vue-demi,所以此时解决方案就是将vue-demi也用cdn引入。 总结 到了这一步,整个文件夹已经完全瘦身了。从一开始的30MB到现在的11.8MB了。我们在项目里面放置了许多json数据(因为业务原因不能上传到服务器),json数据已经占了差不多5、6mb的原因,所以是一...
优化 拆分包 这里有一个自己的个人见解:如果不同模块使用的插件基本相同那就尽可能打包在同一个文件中,减少http请求,如果不同模块使用不同插件明显,那就分成不同模块打包。这是一个矛盾体。这里使用的是最小化拆分包。如果是前者可以直接选择返回'vendor'。
vite打包elementplus发生transform vite打包原理 什么是vite 一个基于浏览器原生ES模块的开发服务器。利用浏览器去解析模块,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。同时另有有Vue文件支持,还搞定定了热更新,而且热更新的速度不会随着模块增加而变慢...
这两个项目都是非常单纯的通过 npm init vite@latest 创建的Vue3+TS项目,并且其中也都引入了目前非常流行的ElementPlus作为组件库。 目前多了一个新的需求:要交给我进行 SEO ,也就是 搜索引擎优化 。在这边先暂且列一些给Vue+Vite项目做SEO的一些常见方式吧: 服务器端渲染 (SSR): 由于 Vue 是一个客户端渲染...
optimizeDepsElementPlusIncludes.push( `element-plus/es/components/${dirname}/style/css`) } } ) }) 我这里除了element的包还有一个vueamap的组件也是用到了按需引入的插件 这里大伙根据自己的需求来查询即可 下边放一下完整的代码 除了一个方法之外还有一个思路,就是我们在开发环境中完整引入element,到了生产环...