前端优化（二）：使用路由懒加载

二、开启路由懒加载

上一章内容： 前端优化（一）：开启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: "/"