手把手教你优化vuecli首屏加载
之前用 vuecli
做了个博客,是一个单页面项目,大概有十个路由
直接 npm run build
打包出来,有一个 1M
的巨大 js
文件
先挂载到服务器上试试
好家伙 这加载时间 仿佛过了半个世纪
首屏页面整整加载了 9s
光加载那个大文件就花了 8s
这必须得做个优化了,没有用户能忍受 9s
的白屏而不关闭页面的
过程中,我还顺便把项目从 vuecli 2.x
迁移到了 vuecli 3
,所以接下来还会介绍一些它们在优化上的异同
vuecli 2.x
自带了分析工具
只要运行
npm run build --report
如果是 vuecli 3
的话,先安装插件
cnpm intall webpack-bundle-analyzer –save-dev
然后在 vue.config.js
中对 webpack
进行配置
chainWebpack: (config) => { /* 添加分析工具*/ if (process.env.NODE_ENV === 'production') { if (process.env.npm_config_report) { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) .end(); config.plugins.delete('prefetch') } } }
再运行
npm run build --report
会在浏览器打开一个项目打包的情况图,便于直观地比较各个 bundle
文件的大小。
路由懒加载
当打包构建应用时,JavaScript包会变得非常大,影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
在一开始就下载完所有路由对应的组件文件,这明显是不合适的,这就像下载一个 app
了,所以我们就需要使用路由懒加载,
在 router.js
文件中,原来的静态引用方式
import ShowBlogs from '@/components/ShowBlogs' routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]
改为:
routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')
以函数的形式动态引入,这样就可以把各自的路由文件分别打包,只有在解析给定的路由时,才会下载路由组件。
element-ui按需加载
首屏需要加载的依赖包,其中 element-ui
整整占了 568k
原本的引进方式引进了整个包:
import ElementUI from 'element-ui' Vue.use(ElementUI)
但实际上我用到的组件只有按钮,分页,表格,输入与警告
所以我们要按需引用:
import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui'; Vue.use(Button) Vue.use(Input) Vue.use(Pagination) Vue.prototype.$alert = MessageBox.alert
注意 MessageBox
注册方法的区别,并且我们虽然用到了 alert
,但并不需要引入 Alert
组件
在 .babelrc
文件中添加( vue-cli 3
要先安装 babel-plugin-component
)
plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]
element-ui
小了很多,不过看到那个显眼的 table.js
后想到, table
组件只有后台管理页面用到了,不需要全局注册,所以我们删除 main.js
中 Table
和 TablColumn
的引用,并在后台组件中局部注册
import { Table, TableColumn } from "element-ui"; components: { "el-table": Table, "el-table-column": TableColumn },
table
就被拆分到了路由文件中