vue怎么做优化,vue前端优化
代码优化并不局限于业务逻辑，比如代码重用、效率等。这是我们可以改进的。本文主要介绍了一些实用的Vue项目优化策略。让我们跟着边肖学。
Vue项目完成后就要从开发环境转成生产环境
有些第三方包太大，导致生成的js文件太大。是时候生成打包报告来检查项目中的问题了。
1.生成报告有两种方式，一种是使用npm运行build - report。
2.另一个ui可视化面板使用vue scaffold，在项目中输入vue ui。
3.在生产环境中单击Run按钮，您可以看到打包了2M js文件。js/chunk-vendors.js是一些项目相关文件。
右边可以看到element-ui、echarts、富文本编辑器、树表插件是最大的依赖项，然后就可以优化了。
4.复制两个main.js文件，分别命名为main-dev.js和main-prod.js，分别代表开发环境和生产环境。
通过vue.config.js修改webpack的默认配置，为开发模式和发布模式指定不同的打包入口。
模块.导出={
lintOnSave:假的，
chainWebpack: config={
//发布模式
config . when(process . ENV . node _ ENV===生产，config={
config . entry(“app”)。清除()。添加(。/src/main-prod.js )
})
//开发模式
config . when(process . ENV . node _ ENV=== development ，config={
config . entry(“app”)。清除()。添加(。/src/main-dev.js )
})
}
}
5.默认情况下，通过导入语法导入的第三方依赖包，最终会打包合并到同一个文件中，导致打包成功后出现单个文件过大的问题。
为了解决上述问题，可以通过webpack的外部节点来配置和加载外部CDN资源。任何在外部声明的第三方依赖包都不会被打包。
模块.导出={
lintOnSave:假的，
chainWebpack: config={
//发布模式
config . when(process . ENV . node _ ENV===生产，config={
config . entry(“app”)。清除()。添加(。/src/main-prod.js )
config.set(externals ，{
Vue:“Vue”，
axios:“axios”，
lodash: _ ，
埃查尔兹：“埃查尔兹”，
NProgress:“NProgress”，
vue-quill-editor : VueQuillEditor
})
config.plugin(html )。tap(args={
参数[0]。isProd=true
返回参数
})
})
//开发模式
config . when(process . ENV . node _ ENV=== development ，config={
console . log(config)；
config . entry(“app”)。清除()。添加(。/src/main-dev.js )
config.plugin(html )。tap(args={
参数[0]。isProd=false
返回参数
})
})
}
}
6.同时，这些第三方依赖包的CDN文件被引入到公共目录下的index.html文件中。
包，可以看到重新打包的文件从2M变成了200K。
7.然后可以懒加载路由，安装@ babel/plugin-syntax-dynamic-import依赖。
(前面的插件transform-remove-console的作用是清除生产环境中的所有console.log)
const prodPlugins=[]
if(process . ENV . node _ ENV=== production ){
prodPlugins.push(转换-删除-控制台)
}
模块.导出={
预设：[
@vue/cli-plugin-babel/preset
],
插件：[
[
成分，
{
libraryName: element-ui ，
样式库名称：“主题-粉笔”
}
],
.产品插件，
@ babel/plugin-语法-动态-导入
]
}
是的，插件的使用请参考vue-router的官方文档。
const Foo=()=import(/* webpackChunkName: group-Foo */。/foo . vue’)
转换路由器文件
从“vue”导入Vue
从“vue路由器”导入vue路由器
//从导入登录./components/Login.vue
const log in=()=import(/* webpackChunkName: log in _ home _ welcome */./components/Login.vue )
//从导入主目录./components/Home.vue
const Home=()=import(/* webpackChunkName: log in _ Home _ welcome */./组件/主页。vue’)
//从导入欢迎./components/Welcome.vue
const Welcome=()=import(/* webpackChunkName: log in _ home _ Welcome */./组件/欢迎。vue’)
//从导入用户./组件/用户/用户. vue
const Users=()=import(/* webpackChunkName: Users _ Rights _ Roles */./components/user/Users.vue )
//从导入权限./组件/电源/右。vue
const Rights=()=import(/* webpackChunkName: Users _ Rights _ Roles */./组件/电源/右。vue’)
//从导入角色./组件/电源/角色。vue
const Roles=()=import(/* webpackChunkName: Users _ Rights _ Roles */./组件/权力/角色。vue’)
//从导入美食./组件/商品/凯特.维
const Cate=()=import(/* webpackChunkName: Cate _ Params */./组件/商品/凯特。vue’)
//从导入参数./组件/货物/参数。vue
const Params=()=import(/* webpackChunkName: Cate _ Params */./components/goods/Params.vue )
//从导入商品列表./组件/货物/列表。vue
const goods list=()=import(/* webpackChunkName: goods list _ Add */./组件/货物/清单。vue’)
//导入添加自./组件/商品/Add.vue
const Add=()=import(/* webpackChunkName: goods list _ Add */./组件/商品/添加。vue’)
//从导入订单./components/order/Order.vue
const Order=()=import(/* webpackChunkName: Order _ Report */./组件/订单/订单。vue’)
//从导入报告./components/report/Report.vue
const Report=()=import(/* webpackChunkName: Order _ Report */./组件/报告/报告。vue’)
面试问题：
某视频剪辑软件前端项目有什么优化策略？
1、生成打包报告。(可以发现一些问题，并进行解决)
2、使用第三方库启用加拿大加载
3、使用元素-用户界面的话，按需加载组件
4、使用路由懒加载
生成打包报告后可以看到哪些问题呢？
可以看到整个项目依赖大小，项目访问速度，从而进行优化
那怎么优化项目呢？
到整个项目依赖大小，项目访问速度，从而进行优化
用户体验优化
点击更好防止苹果手机点击延迟
在开发移动端组件项目时，手指触摸时会出现300毫秒的延迟效果，可以采用点击更好对爱谱王系列的兼容体验优化。
菊花装货
菊花正在加载，在加载资源过程之中，可以提供正在加载。此菊花装货不是那菊花。所以可以自由选择自己喜欢的菊花。
骨架屏加载
在首屏加载资源较多，可能会出现白屏和闪屏的情况。体验不好。盗图一波，小米商城使用骨架屏进行首屏在资源数据还没有加载完成时显示，给很好的体验效果。
总结
到此这篇关于某视频剪辑软件项目优化实战策略的文章就介绍到这了，更多相关某视频剪辑软件项目优化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。