二、开启路由懒加载
上一章内容: 前端优化(一):开启nginx gzip压缩
本文继上一章,接着前一章,继续讲解如何做前端优化,以vue项目为例。
路由懒加载依赖于webpack的分片,默认情况下,一个项目被webpack打包成一个 index.html, app.js, chunk-vendors.js, app.css,chunk-vendors.css和若干图片。
单页应用下,只有一个index.html。如果要做多页,可进行配置。
app.js对应为项目本身的js,chunk-vendors.js为引入的第三方js。css同理。
这一章我们的主要目的是使用路由懒加载,根据路由切割js和css文件,按需加载,以免文件过大,影响网页加载速度。
我们只需在路由配置的路由数组中,修改组件导入方式即可。
修改前:
routes: [
{
path: "/"