下面是对“22个Vue优化技巧(项目实用)”的详细讲解。
一、懒加载路由
描述
使用懒加载路由可以大大提升项目的性能，当路由被访问时才会加载对应的组件，如果不使用懒加载路由，那么全局的所有组件会在项目启动时被加载，浪费大量资源。
示例
在路由文件中使用import语句，将组件打包成一个chunk，当路由被匹配时才会加载：
const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
二、CDN缓存静态资源
描述
将静态资源放置到CDN上，在浏览器第一次加载页面时，静态资源会被缓存在浏览器中，提升了下一次访问时的速度。
示例
使用HtmlWebpackPlugin插件需要手动添加静态资源链接：
const js = ['https://cdn.com/js/vue.js']
const css = ['https://cdn.com/css/reset.css']
const htmlWebpackPlugin = new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html',
title: 'CDN Demo',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
cdn: {
js,
css
}
})
module.exports = {
// ...
plugins: [
htmlWebpackPlugin
]
}
在index.html模板文件中添加对应标记即可：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title><%= htmlWebpackPlugin.options.title %></title>
<%- htmlWebpackPlugin.tags.headTags %>
<% for (let i = 0; i < htmlWebpackPlugin.options.cdn.css.length; i++) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>">
<% } %>
</head>
<body>
<div id="app"></div>
<% for (let i = 0; i < htmlWebpackPlugin.options.cdn.js.length; i++) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
以上两个技巧只是其中的两个例子，这篇文章中还详细介绍了其它的20个优化技巧。希望这些技巧可以对你的Vue项目的性能提升有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：22个Vue优化技巧(项目实用) - Python技术站
微信扫一扫 
支付宝扫一扫 