分模块打包优化

一、问题描述

因为构建vue项目之初没有考虑到项目加载速度方面的优化问题，在开发了一段时间之后发现打包后两个js文件过大，将近有20mb,每次打开项目都会有好几秒的空白，要解决这个问题就要用到分模块打包。

二、优化

分享一种最有效也是最简单的改动。在引入路由component的地方使用函数的方式引用，代码如下：

优化前

• 引入语法

import login from '../src/components/pages/login'
import monitor from '../src/components/pages/monitor'
import app from '../src/components/pages/app'
import warning from '../src/components/pages/warning'
import workspace from '../src/components/pages/workspace'
import query from '../src/components/pages/query'
import error from '../src/components/pages/404'

• 打包效果
  

优化后

• 引入语法

let login = () => import('@/components/pages/login')
let monitor = () => import('@/components/pages/monitor')
let app = () => import('@/components/pages/app')
let warning = () => import('@/components/pages/warning')
let workspace = () => import('@/components/pages/workspace')
let query = () => import('@/components/pages/query')
let error = () => import('@/components/pages/404')

• 打包效果

3.描述

以上优化由修改路由引入方式实现，优化后打包的代码将根据路由需要的依赖进行打包。示例代码中有7个一级路由，所以优化后js文件与js.map文件被分割成了7份，实现分模块打包，按需加载。

END