当前位置: 首页 > Web前端 > vue.js

Vue优化方案

时间:2023-04-01 00:35:41 vue.js

1.打开Gzipmodule.exports={...configureWebpack:(config)=>{constconfigNew={}if(process.env.NODE_ENV==='production'){configNew.externals=externalsconfigNew.plugins=[//gzipCompressionWebpackPlugin(资源压缩插件)newCompressionWebpackPlugin({filename:'[path].gz[query]',test:newRegExp('\\.('+['js','css'].join('|')+')$'),threshold:10240,//只有大于这个值的资源才会被压缩minRatio:0.8,//只有压缩比小于0.8的资源才会被压缩deleteOriginalAssets:false})]}returnconfigNew},}2.include和exclude指定loader的函数目录const{chain,set,each}=require('lodash')//svgconstsvgRule=config.module.rule('svg')svgRule.uses.clear()svgRule.include//适用于图标目录中的文件。add(resolve('src/assets/svg-icons/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId:'d2-[name]'}).end()3.第三方模块按需导入,不全局挂所有组件;4、图片的懒加载和长列表的路由懒加载动态加载element-ui有现成的懒加载组件,配置lazy属性即可<el-imagev-for="urlinurls":key="url":src="url"lazy>路由延迟加载//将//从'./views/导入UserDetailsUserDetails'//替换为constUserDetails=()=>import('./views/UserDetails')constrouter=createRouter({//...routes:[{path:'/users/:id',component:UserDetails}],})5.使用keep-alive缓存组件6.使用websocket代替轮询