首页 > 其他分享 >vue性能优化一(打包)

vue性能优化一(打包)

时间:2024-03-10 22:11:40浏览次数:23  
标签:vue return 依赖 优化 id 打包

1.依赖插件等无需每次打包都重新打包

  vite.config.js文件中配置

export default () => {
    return {
        build: {
            sourcemap: false,
            manifest: true,
            rollupOptions: {
                output: {
                    manualChunks(id){
                        // 优化 依赖单独打包
                        if(id.includes('node.modules')){
                            return 'vendor'
                        }
                    }
                }
            },
        }
    }
}

  

标签:vue,return,依赖,优化,id,打包
From: https://www.cnblogs.com/foxing/p/18064981

相关文章

  • vuex
    3.VUEX原理图:3.1概念在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。3.2何时使用?多个组件需要共享数据时1.多个组件依赖于同一状态2.来自不同组件的行为需要变更同......
  • Vue3学习(二十三)- 保存文档内容正常显示
    写在前面情人节已经接近尾声了,虽然跟我没什么关系,但是我还是很渴望,能遇到一个良人相伴一生。现在时间:内心异常平静,相对吵闹我更喜欢安静的晚上,没人打扰,enjoy自己独处的时间!保存内容显示1、任务拆解读取已保存内容将读取内容在富文本里显示2、读取已保存内容这个很好......
  • 在VueJS中使用 froala 富文本编辑器
    安装包npminstallvue-froala-wysiwyg--save集成组件import'./assets/main.css'//ImportFroalaEditorimport'froala-editor/js/plugins.pkgd.min.js';//Importthirdpartypluginsimport'froala-editor/js/third_party/embedly.min';......
  • vuex
    Vuex快速入门简介Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。安装在项目根目录执行如下命令来安装Vuex若失败,可使用cnpmnpminstallvuex--save修改main.js......
  • Acwing166 数独题解 - DFS剪枝优化
    166.数独-AcWing题库题意数独是一种传统益智游戏,你需要把一个9×9的数独补充完整,使得数独中每行、每列、每个3×3的九宫格内数字1∼9均恰好出现一次。请编写一个程序填写数独。思路搜索+剪枝(优化搜索顺序、位运算)优化搜索顺序:很明显,我们肯定是从当前能填合法......
  • vue前端框架的使用
    最近需要改造一个旧项目,旧项目使用的springremote,需求,将前端页面单独分离出一个应用服务,这里将使用node.js作为服务技术栈使用的前端框架是vue,这里使用的版本是vue2.9听说2.x跟3.x版本有一定的区别.先研究一下2.x之前只知道nodejs能够挂载静态页面云云,之前有项目这样......
  • vue进阶二
    Vue进阶二一、Vue中的表单1.v-model修饰符创建表单,并通过v-model绑定data中的属性<template><divid="app"><divstyle="width:50%"class="container"> <div> <h3>Regist</h3> <h5>Email</......
  • vue进阶一
    Vue进阶一、vue实例(对象)1.一个基本的vue的实例<head> <metacharset="UTF-8"> <title></title></head><body> <divid="app"> <h1> {{title}} </h1> <buttonid=......
  • vue进阶三-webpack
    一、vue-router路由1.安装vue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。npminstallvue-router--save-dev如果在一个模块化工程中使用它,必须要通过Vue.use()明确地安装路由功能:importVuefrom'v......
  • vue进阶
    Vue进阶一、vue实例1.一个基本的vue的实例<head> <metacharset="UTF-8"> <title></title></head><body> <divid="app"> <h1> {{title}} </h1> <buttonid=&quo......