優化Vue項目的文件大小

時間 2019-12-06

標籤優化 vue 項目文件大小简体版

原文原文鏈接

在使用Vue搭建項目時，常常因爲引入的庫太多，致使打包後的文件體積很是大，特別是vendor.js。這就形成頁面第一次打開很慢，若是在瀏覽器中調試頁面（打開控制檯，禁用緩存），頁面打開速度簡直是不能忍受的！
下面列了一些經常使用的方法來減少文件大小，加快頁面打開速度。css

首先使用webpack-bundle-analyzer分析哪些文件體積比較大html

npm install --save-dev webpack-bundle-analyzer
npm run analyz

默認會在瀏覽器中打開 http://127.0.0.1:8888 ，如圖
vue

Vue懶加載

當打包構建應用時，Javascript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。
結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載。jquery

一、能夠將異步組件定義爲返回一個 Promise 的工廠函數 (該函數返回的 Promise 應該 resolve 組件自己)：webpack

const Foo = () => Promise.resolve({ /* 組件定義對象 */ })

二、在 Webpack2 中，咱們可使用動態 import語法來定義代碼分塊點 (split point)：web

import('./Foo.vue') // 返回 Promise

注意：若是您使用的是 Babel，你將須要添加 syntax-dynamic-import 插件，才能使 Babel 能夠正確地解析語法。npm

結合這二者，這就是如何定義一個可以被 Webpack 自動代碼分割的異步組件。element-ui

const Foo = () => import('./Foo.vue')

三、在路由配置中什麼都不須要改變，只須要像往常同樣使用 Foo：segmentfault

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

把組件按組分塊
有時候咱們想把某個路由下的全部組件都打包在同個異步塊 (chunk) 中。只須要使用命名chunk，一個特殊的註釋語法來提供chunk name (須要 Webpack > 2.4)。瀏覽器

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

Webpack 會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中。

引入壓縮後的文件

有兩種方式來引入：
一、提取不會改動的第三方庫，使用CDN替換，在html文件中引入
二、下載第三方庫，放到項目的靜態文件目錄(通常爲/static)，而後在main.js中引入

import '../static/element-ui/index.css'
import * as ElementUI from '../static/element-ui/index'
import 'font-awesome/css/font-awesome.min.css'

Vue.use(ElementUI)
Vue.use(VueRouter)

優化屢次引入的文件

若是再多個頁面中引入了相同的文件，那麼打包時會把改文件打包兩次，分別對應到各頁面文件中。
好比在多個頁面中都引入了jquery， import $ from 'jquery' ，那麼能夠在main.js中引入一次，而後就能夠直接在別的頁面中使用 $ 變量了

使用模塊化引入

對於Element UI或者loadsh這樣的項目，一次引入的話，文件會很大，對於一些使用不到的模塊，能夠按需引入，例如：

import { debounce } from 'lodash'
import { throttle } from 'lodash'

// 改爲以下寫法

import debounce from 'lodash/debounce'
import throttle from 'lodash/throttle'