手把手教你优化vuecli首屏加载

不念不忘少年蓝@ 2021-12-21 01:03 387阅读 0赞

之前用 `vuecli`做了个博客，是一个单页面项目，大概有十个路由  
直接 `npm run build`打包出来，有一个 `1M`的巨大 `js`文件

![1720858-20190620105050223-2026888320.png][]

先挂载到服务器上试试  
好家伙 这加载时间 仿佛过了半个世纪

![1720858-20190620105100835-110350988.png][]

首屏页面整整加载了 `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`文件的大小。

![1720858-20190620105126056-96595695.png][]

## 路由懒加载 ##

当打包构建应用时，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')

以函数的形式动态引入，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会下载路由组件。

![1720858-20190620105146679-737192119.png][]

## 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"
    　　　　}
    　　]
    ]

![1720858-20190620104859490-596564146.png][]

`element-ui`小了很多，不过看到那个显眼的 `table.js`后想到， `table`组件只有后台管理页面用到了，不需要全局注册，所以我们删除 `main.js`中 `Table`和 `TablColumn`的引用，并在后台组件中局部注册

import { Table, TableColumn } from "element-ui";
    components: {
        "el-table": Table,
        "el-table-column": TableColumn 
    },

![1720858-20190620105003547-2087903109.png][]

**`table`**就被拆分到了路由文件中

转载于:https://www.cnblogs.com/happycoding7/p/11057284.html

[1720858-20190620105050223-2026888320.png]: /images/20211220/18c9ba5ed0b34712b32f6767661d156f.png
[1720858-20190620105100835-110350988.png]: /images/20211220/8f1d293955d54e35bb9ba8a8805803b7.png
[1720858-20190620105126056-96595695.png]: /images/20211220/b23d9320b11c4d5d80ba8bb3d5652804.png
[1720858-20190620105146679-737192119.png]: /images/20211220/62c59bf725ab474097d763cb40a347f1.png
[1720858-20190620104859490-596564146.png]: /images/20211220/c7452a3ceda04ca9a4a5fefce43bb454.png
[1720858-20190620105003547-2087903109.png]: /images/20211220/94d8d728626547908a75c7c9d35bb768.png