關於nuxtjs配置webp的信息

本文目錄一覽：

1、NUXT項目打包優化策略
2、nuxt-generate 靜態站
3、Vue-awesome-swiper使用教程
4、Vue SSR 項目 Nuxt.js 框架之《如何引入第三方UI框架element-ui》
5、nuxt.js 簡述

NUXT項目打包優化策略

用nuxt開發完項目之後，開開心心打包扔上服務器準備收工，卻沒多久，測試童鞋遺憾的告訴我，壓測50並發未通過。what？好吧。咱們再接下來老老實實的研究怎麼壓縮打包優化性能。

性能優化，無外乎那幾個方案：文件壓縮，文件緩存，CDN，DNS 預解析。。。

這裡我們首先看一下不加任何優化的項目，打包後的分佈：

這裡能看到element-ui佔了絕大部分的打包空間，是因為全局引入了element-ui，所以即使我們只使用了一部分的elemnt組件，但仍然把整個element給打包進來了。

所以這裡有一個可以優化的點：只引入element使用的組件，這樣在打包的時候只需要打包使用的組件，體積就會減小很多。

我們再來看看這麼處理之後，我們打包出來的效果：

可以看出，我們減少了將近 400kb 的體積，效果十分顯著。

好了，我又自信滿滿的把包丟到服務器上，準備金盆洗手。?

然鵝沒過多久，運維童鞋發過來一張圖把我打回原點。

我看了一下vendor.app.js，足有501kb，難怪會阻塞?♀️好吧，這裡應該使用上文件壓縮這桿大槍了。

nuxt本身就是基於webpack的，正好安裝compression-webpack-plugin來對文件進行壓縮。

首先安裝npm install compression-webpack-plugin

然後在nuxt.config.js中：

const CompressionPlugin = require(‘compression-webpack-plugin’);

module.exports={

build: {

plugins: [

new CompressionPlugin({

test: /\.js$|\.html$|\.css/, // 匹配文件名

threshold: 10240, // 對超過10kb的數據進行壓縮

deleteOriginalAssets: false // 是否刪除原文件

})

}

這樣打包出來的大小雖然沒變，但是點擊.nuxt-dist-client中你會發現

觀察發現gz打包後，較原來的文件減少了3/4的體積。有了這些gz後綴的文件，再配合nginx打開gzip服務。我想這回應該可以衝過50並發了吧，說不定200並發都沒問題???

好了，我這回真的自信滿滿的把包丟到服務器上，通知測試童鞋再次壓測，果不其然，測試童鞋過了一會回復：50並發跑5次無異常。??我大氣說，上100！我翹着得意的二郎腿，等着好消息再次到來。過了一會，果不其然！測試童鞋告訴我，100並發阻塞。原因同上，出在了vendor.app.js上?

這裡我說一下vendor.app.js打包之後的體積是144kb。然鵝在高並發下，表現還是不理想，於是乎我只能上網去到處搜索解決方案，畢竟po主的webpack知識也就那麼一勺水的深度?♀️?♀️

這裡還真讓我找到了一個台灣的網站，可見參考鏈接第三條。

splitChunks: 設定 Chunks 的最大和最小 size。

在nuxt.config.js中加入：

module.exports={

build: {

optimization: {

splitChunks: {

minSize: 10000,

maxSize: 250000

}

打包，觀察打包結果：

可以看到雖然包體積雖然沒變，但是像vendor.app.js這種單個體積大的被拆分成n個體積小的文件了。

這回終於是可以突破100並發5次無異常，達成並發要求了????

總結一下，其實po主也不是什麼webpack大神，也是摸爬滾打整出來的，大家如果能有什麼更好的優化建議或者指教，請多多交流，不對之處我會改正！

參考：

Nuxt 項目性能優化調研

NUXT項目的性能優化

SplitChunks Lodash Vuetify tree shaking

nuxt-generate 靜態站

nuxt generate部署靜態站

在nuxt.config.js配置頁面路徑

默認情況下，運行nuxt generate將為每個路由創建一個目錄並生成index.html文件。

在nuxt.config.js里generate選項里配置

subFolders： flase

設置為false時，將根據路由路徑生成HTML文件

部署後項目會生成dist目錄，直接打開對應的html文件，可能會出現圖片不顯示，不用管部署到服務器後就不會有這個問題。

Vue-awesome-swiper使用教程

github地址：

Ⅰ. 什麼是Nuxt.js:

Nuxt.js 是一個基於 Vue.js 的通用應用框架，通過對客戶端/服務端基礎架構的抽象組織，預設了利用 Vue.js 開發服務端渲染的應用所需要的各種配置。（開箱即用）

官方地址：

Ⅱ. Nuxt安裝使用

Ⅲ. Nuxt模板目錄結構分析

重點關注：components、layouts、pages、plugins、nust.config.js目錄及文件

Ⅳ.Nuxt路由

➀.pages目錄結構自動生成對應的路由配置

➁路由跳轉

注意：不能用a標籤代替nuxt-link組件，雖然最終的顯示效果一樣，但是a標籤會刷新頁面

③動態路由

④路由參數校驗

Nuxt.js 可以讓你在動態路由對應的頁面組件中配置一個 validate 方法用於校驗動態路由參數的有效性。該函數有一個布爾類型的返回值，如果返回true則表示校驗通過，如果返回false則表示校驗未通過。

⑤嵌套路由

Ⅴ.布局組件

特殊的布局組件：error布局組件（error是關鍵字，只能取這個名字）

Ⅵ.設置全局樣式

Ⅶ.ElementUI使用

測試的時候不要范如下錯誤：

Ⅷ.發送請求

➀.生命周期函數：

在nuxt中，只有created以及beforeCreate兩個能夠在服務端正常使用

但是發異步請求不能在created生命周期函數中去發送，因為它會在前端執行（打印一下，發送前端和服務器端都會有打印信息）

那麼如何發送異步請求呢？

➁.asyncData的方法:可以在服務端或路由更新之前被調用, 需要注意這個函數中不能使用 this

③. axios的使用

Ⅸ.SEO優化

➀.全局優化:在nuxt.config.js配置文件中修改

➁.局部優化:去每個頁面直接加入head() 方法

Ⅹ.實戰項目：豆瓣電影小案例

➀.案例源碼：

複製這段內容後打開百度網盤手機App，操作更方便哦

鏈接：

提取碼：iqjb

➁.獲取源碼後項目跑動

後記：解決SEO問題不一定非得用服務端渲染來處理，特別是項目已經開發完畢，突然告訴你添加個SEO優化，這時候可以考慮vue-meta-info ，官方地址：

Vue SSR 項目 Nuxt.js 框架之《如何引入第三方UI框架element-ui》

在項目開發中引入第三方 UI框架再平常不過，那 nuxt 該如何引入呢？我們以 Elemeng-ui 為例，具體看下在 nuxt 中配置與使用的步驟是怎樣的。

需在 plugins 文件夾里創建一個 element-ui.js 文件，內容如下：

在 nuxt 項目中如何使用 scss ？與 Vue 中使用的有和不同？也簡單，只是配置上略有不同，使用上沒有不同。先安裝 node-sass sass-loader ，如下：

安裝成功後，就可以在頁面里使用 scss 了，無需任何配置，如下：

第一步：安裝 @nuxtjs/style-resources

第二步：配置 nuxt.config.js

項目重啟後就可以了，歡迎留言評論

nuxt.js 簡述

vue單頁面應用渲染是從服務器獲取所需js，在客戶端將其解析生成html掛載於

id為app的DOM元素上，這樣會存在兩大問題。

除此之外，nuxt與vue還有一些其他方面的區別。

下圖為關於nuxt的簡單概述

vue文件中可直接使用

sass文件如需解析，nuxt.config.js中配置css屬性

封裝axios，解決每個請求前加baseURL

plugins/axios.js

index.vue

為避免每個頁面都引入moment，執行 moment.locale(‘zh-cn’) ，可將其定義為全局方法

icon.png文件存放在static文件夾下，nuxt.config.js中配置head屬性

中間件存放於middleware文件夾下，按使用場景可分為全局中間件和單頁面中間件

中間件執行流程順序：

nuxt.config.js – 匹配布局 – 匹配頁面

按照index.vue通過 require(‘mini-toastr’) 引入miniToastr，運行程序報錯如下

打印miniToastr發現為一Module對象，init掛載在其default屬性上

所以修改引入方法為

為什麼需要require().default

關於如上介紹，測試關於兩種模塊的導出方法

方式一：export default

新建test.js文件

vue頁面導入

此時 require(‘~/plugins/con.js’) 打印為

方式二：module.exports