前言
之前用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次及以上的包抽離出來,放進公共依賴文件,不過由于首頁也有復用的組件,所以首頁也會下載這個公共依賴文件
*請認真填寫需求信息,我們會在24小時內與您取得聯系。