很多人觉得写代码时HTTP请求网页速度变慢，但现在技术进步了，好多新鲜神器哟～比如Webpack，这货能将Vue的零七八碎的部分整合在一起，减少许多请求，速度嗖嗖地快。这样做还能提升用户体验，解决优化问题！
一、Webpack打包的实践
搞定Webpack打包超简单！只需要弄懂什么是入口和出口，还有如何载入模块就好了。而且，合并其实就是把许多小文件变成几个大文件，这样浏览器就不用请求那么多次！刚学的时候可能会有点晕，但学会后效果马上看得见~
装包过程中学到了Webpack插件怎么用，像那个“CommonChunkPlugin”，就能找出公共模块省去不断加载的繁琐步骤。这么一搞，文件变小了，网页速度都快很多！因此，优化不仅要讲究速度，更得善用每一份资源
二、懒加载在大型Web应用中的应用
import Vue from 'vue'
import Router from 'vue-router'
// 异步加载组件
const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
const Contact = () => import('./views/Contact.vue')
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/contact',
name: 'contact',
component: Contact
}
]
})
用上Vue-router跟Webpack的配合，能实现动态加载Vue组件~让我们搭什么用什么，方便又轻松！加载速度也快了不少！
搞定！用Vue路由和Webpack实现函数导入，省去了很多没用的资源。速度也提升了不少，每次用户快速找到想要的东西，都觉得心情特好！
三、服务端渲染（SSR）提升首屏加载速度
我超级喜欢SSR这种技术，它能让网页变得飞快，对SEO也有益处！要实现这一点，你需要把Vue.js和ASP.NETCore巧妙的结合起来。首先，用vue-server-renderer在服务器上直接渲染网页；然后，调整一下设置，Vue服务就可以马上运行了。
// 引入相关的命名空间
using Microsoft.AspNetCore.Mvc;
using VueCliMiddleware;
public class HomeController : Controller
{
// GET: /
public IActionResult Index()
{
return View(new { Message = "Hello from server!" });
}
// GET: /vue/{*url}
public IActionResult Vue(string url)
{
return View(new { Message = "Hello from server!" });
}
}
总的来说，SSR还是挺有必要的。首先，用这个方法用户可以更快地看见网页内容，体验upup走起！再说网上搜我们网站的人也会变多，于是网站流量自然就上去了
四、缓存机制的运用
public class Startup
{
// ...
public void ConfigureServices(IServiceCollection services)
{
// ...
services.AddSpaPrerenderer(options =>
{
options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.js";
options.ExcludeUrls = new[] { "/sockjs-node" };
});
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
// ...
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseVueCli(npmScript: "serve", regex: "Compiled successfully");
}
else
{
spa.UseSpaPrerendering();
}
});
// ...
}
// ...
}
想要网页快如闪电？试试缓存！把网页中不变或变化不大的部分缓存起来，让数据库休息几日，瞬间就让你的网页飞速打开了！只需在ASP.NET里设置下缓存，甚至连Vue组件的渲染结果也可以保存！
搞定了缓存策略，大家找东西可快多了，不用总跑去服务器了。用着就是顺手，大家肯定更开心！每次看到你们因为快速响应笑得合不拢嘴，我就特有成就感！
五、结合现实案例的进一步优化
网上的新鲜东西挺好玩？像是那种实时更新的特效，速度特快！以前那些老程序得重头刷，现在立马能看新动态，HTTP请求也省了不少。
对，得跟你说下，我搞了个ServiceWorkers帮你保存离线文件，不怕网络慢。用过后，真心觉得优化是为了给用户提供更好的体验！
六、总结与展望
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Caching.Memory;
using VueCliMiddleware;
public class HomeController : Controller
{
private readonly IMemoryCache _cache;
public HomeController(IMemoryCache cache)
{
_cache = cache;
}
// GET: /vue/home
public IActionResult GetHome()
{
var cacheKey = "home_page";
var html = _cache.Get(cacheKey);
if (html != null)
{
return Content(html);
}
var options = new VueCliMiddlewareOptions{ NpmScript = "build" };
var request = new DefaultHttpContext().Request;
var response = new DefaultHttpContext().Response;
var runner = new VueCliMiddlewareRunner(options, request.Path.Value, response.StatusCode);
html = runner.Invoke();
if (response.StatusCode == 200)
{
_cache.Set(cacheKey, html, TimeSpan.FromMinutes(10));
}
return Content(html);
}
}
试试看这个新办法，把Vue.js和ASP.NET搭在一起，界面速度和稳当性瞬间就飙升！每减少一次HTTP请求，就能节省点儿金钱。还有懒加载、服务器渲染、缓存那些小窍门，都挺实用哒。
过后，我学点新鲜玩意儿，让咱们网站更溜更快更舒服。再说了，我也乐意跟大家分享我学到的东西，一起来推动互联网发展！
最后说下，想问你们一下有没有啥做网页应用的妙招可以既飞快又让用户开心？赶紧到评论区告诉我呗！记得点赞转发让更多小伙伴都能学到！
评论0