vue+webpack项⽬优化
总结为：
1：打包优化
2：异步加载
3：页⾯加载时加loading特效
4：点击延迟
5：inline manifest
6：逻辑代码优化
⼀：打包优化
⽅法为：在webpack的公共配置⽂件（⼀般为f.js）的resolve下有extensions选项。数组中加⼊不需要打包的组件，并且在⼊⼝的html中使⽤cdn的⽅式引⼊即可
⼆：异步加载
所谓的异步加载组件，其实就是组件懒加载。主要包含两部分：路由配置和⼦组件的调⽤
1：路由设置实现懒加载
{
path: '/portal/:system/home', //⽤户登⼊后的app⾸页
component: (resolve) => require(['@/page/home'], resolve)
}
2：⼦组件的调⽤
通常的写法是，在⽗组件中import组件，随后在⽗组件的components中注册⼦组件后使⽤⼦组件，⽐较消耗性能。使⽤异步的⽅法使⽤⼦组件 ——直接在components中导⼊⼦组件，需要的时候才加载它：
components: {
selfProfile: () => import("@/components/profile")
}
三：页⾯切换时加
注册页面js特效页⾯切换时加loading特效
三：
页⾯的响应、渲染速度的影响原因多种多样。为了解决⽤户在⾸次进⼊应⽤或者页⾯切换的时等待的⽩屏时间较长时，可以使⽤vue-router 提供的beforeEach()和afterEach()⽅法。所以使⽤loading进度条是⼀种⽐较明智的做法。使⽤nprogress。API可参考，使⽤⽅法如下(假设已经安装好了nprogress):
在router.js中使⽤import引⼊nprogress以及它的样式表，配置ngprocess。并在路由配置完成后，调⽤beforeEach() 和 afterEach⽅法
//路由配置前
//此处为路由配置列表，可参考上⾯的异步加载⽅式进⾏编写
//路由配置后
router.beforeEach(function (to, from, next) {
NProgress.start() //开始loading
const toIndex = Item(to.path)
const fromIndex = Item(from.path)
if (toIndex) {
if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
storemit('UPDATE_DIRECTION', {direction: 'forward'})
} else {
// 判断是否是ios左滑返回
if (!isPush && (w() - endTime) < 377) {
storemit('UPDATE_DIRECTION', {direction: ''})
} else {
storemit('UPDATE_DIRECTION', { direction: 'reverse' })
}
}
} else {
++historyCount
history.setItem('count', historyCount)
to.path !== '/' && history.setItem(to.path, historyCount)
storemit('UPDATE_DIRECTION', {direction: 'forward'})
}
if (/\/http/.test(to.path)) {
let url = to.path.split('http')[1]
window.location.href = `http${url}`
} else {
next()
}
})
router.afterEach(function (to) {
NProgress.done() //loading结束
})
四：点击延迟
安装fastclick后，在main.js中引⼊即可：
import FastClick from 'fastclick'
FastClick.attach(document.body)
五：inline manifest
  manifest⽂件时路径配置和异步组件名字列表，这么做可以减少⼀个http请求。具体做法为，先在⼊⼝页⾯index.html中的head的最后⼀⾏加⼊代码
<%=htmlWebpackPlugin.files.webpackManifest%>
  最后在webpack的公共配置⽂件(我的是f.js)的vux-loader配置的 plugins 列表中加⼊inline-manifest插件：
plugins: ['inline-manifest', 'vux-ui', 'progress-bar', 'duplicate-style']
})
六：逻辑代码优化
这部分的建议就是：①每个vue⽂件尽可能⼩(多使⽤组件，加强可复⽤性)；②vue指令中的v-show和v-if的使⽤：v-if耗性能更多，所以频繁切换的使⽤ v-show，不频繁切换的使⽤ v-if；③vue指令中的v-for搭配:key使⽤，确保唯⼀性；④样式表css务必加scoped以防⽌⼲扰。。。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。