之前用 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就被拆分到了路由文件中