Vue是一種基于組件的前端開發框架，對于復雜的前端項目來說，組件化開發可以很好地提高代碼的復用性和可讀性。而ElementUI則是一種基于Vue的組件庫，提供了很多常用的UI組件，可以大大減少我們在前端開發中對于UI的開發時間。當我們使用ElementUI時，其所使用的CSS和JS文件占用的大小會影響打包后的文件大小，因此我們需要對其進行優化。

我們可以在打包時使用webpack的externals選項將ElementUI中的JS文件排除在打包文件之外，而在HTML文件中通過CDN方式引入。這樣可以大大減少我們打包后的JS文件大小提高頁面的加載速度。

// webpack.config.js
module.exports = {
// ...
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT'
}
}

而對于ElementUI的CSS文件，我們可以將其放在單獨的CSS文件中，在HTML文件中通過link標簽加載。這樣不僅可以減少打包后的CSS文件大小，還能減少頁面加載時樣式渲染的時間。

// 在HTML文件中加入
<link rel="stylesheet" >

除了以上兩種優化方式，我們還可以使用babel-plugin-component來按需引入ElementUI的組件，這樣可以減小打包后JS文件的大小，提升頁面加載速度。

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

同時，我們在代碼編寫時也要注意一些細節。如避免重復引入同一個組件，以及在使用組件時可以通過props選項來傳入一些組件需要的數據，避免過度使用$parent和$children。

總之，在我們使用ElementUI開發項目時，不僅需要注意其提供的組件的使用，還需要注意其對于我們打包后的文件大小產生的影響。通過以上的幾種優化方式，我們可以減小頁面加載時所需要的時間和網絡請求量，提升頁面的質量。