一、问题描述
因为构建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份,实现分模块打包,按需加载。