前言

之前用vuecli做了个博客，是一个单页面项目，大概有十个路由。

直接npm run build打包出来，有一个1M的巨大js文件。

先挂载到服务器上试试

好家伙 这加载时间 仿佛过了半个世纪

首屏页面整整加载了9s光加载那个大文件就花了8s

这必须得做个优化了，没有用户能忍受9s的白屏而不关闭页面的

过程中，我还顺便把项目从vuecli2.x迁移到了vuecli3，所以接下来还会介绍一些它们在优化上的异同

分析

vuecli2.x自带了分析工具

只要运行npm run build--report

如果是vuecli3的话，先安装插件

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文件的大小

可以看到 项目中所有的依赖，所有的路由，都被打包进了同一个文件中

另外，在浏览器中，也可以通过来查看代码的使用状况

红色的是下载了但未使用的部分

路由懒加载

当打包构建应用时，包会变得非常大，影响页面加载。

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

在一开始就下载完所有路由对应的组件文件，这明显是不合适的，这就像下载一个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')

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

首屏需要加载的文件变成了橙色的部分，被小弟们分流出去了300k

如果是在vuecli3中，我们还需要多做一步工作

因为vuecli3默认开启(预先加载模块)，提前获取用户未来可能会访问的内容

在首屏会把这十几个路由文件，都一口气下载了

所以我们要关闭这个功能，在vue.config.js中设置

参考官网的做法：

设置完毕后，首屏就只会加载当前页面路由的组件了

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

注意注册方法的区别，并且我们虽然用到了alert，但并不需要引入Alert组件

在.babelrc文件中添加（vue-cli3要先安装babel-plugin-)：

plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

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

import { Table, TableColumn } from "element-ui";

components: {
    "el-table": Table,
    "el-table-column": TableColumn },

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

组件重复打包

可以看到上图，有两个路由文件都引用了.js造成重复下载

我们可以在webpack的config文件中，修改的配置

minChunks: 3

把3改为2，就会把使用2次及以上的包抽离出来，放进公共依赖文件，不过由于首页也有复用的组件，所以首页也会下载这个公共依赖文件