Vue2 + webpack + express4構建單頁應用(二)

根據Vue2 + webpack + express4構建單頁應用(一)已經構建了一個基本的小應用，可是尚未解決jquery的ajax請求、style模塊中使用less等問題

1、實現異步請求及轉發

1.客戶端發起請求

一直實現異步請求都是用ajax（XMLHttpRequest）來實現的 ,最近興起了ajax的替代技術fetch,XMLHttpRequest 是一個設計粗糙的 API，不符合關注分離（Separation of Concerns）的原則，配置和調用方式很是混亂，並且基於事件的異步模型寫起來也沒有現代的 Promise，generator/yield，async/await 友好。

Fetch 的出現就是爲了解決 XHR 的問題。

我在github上選擇了一個支持先後端同構的fetch插件：https://github.com/matthew-andrews/isomorphic-fetch

在項目中執行 npm install --save isomorphic-fetch es6-promise 下載插件，能夠在須要的地方按照下面方式使用：

import es6Promise from 'es6-promise'; import fetch from 'isomorphic-fetch'; es6Promise.polyfill(); fetch('//offline-news-api.herokuapp.com/stories') .then(function(response) { if (response.status >= 400) { throw new Error("Bad response from server"); } return response.json(); } ) .then(function(stories) { console.log(stories); }); 

通常在項目中會將以上代碼抽離出來寫成一個方法單獨抽離出成一個文件，使用時引入文件調用該方法

2.node端轉發異步請求

node有一個http轉發的中間件http-proxy-middleware

npm install http-proxy-middleware --save 下載中間件

而後在app.js中引入中間件並註冊

var proxy = require('http-proxy-middleware'); app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true})); 

詳細使用，參考 https://github.com/chimurai/http-proxy-middleware#options

2、使用less預編譯語言

如今寫樣式通常可使用預編譯語言less或者sass

根據我的習慣我選用的less，使用less須要有一下配置：

1.在.vue文件中的<style>須要加上lang="less"屬性，如：

<style lang="less"> 

2.下載less-loader、less插件，npm install --save-dev less-loader less

3.在webpack.base.conf.js中加上postcss: [require('autoprefixer')()]，以下：

vue: { loaders: { js: 'babel' }, postcss: [require('autoprefixer')()] } 

這樣就能夠在.vue中的style裏邊寫less語法了

3、將.vue中的css單獨提出來成一個css文件

須要使用webpack的extract-text-webpack-plugin插件

參考文檔：https://vue-loader.vuejs.org/en/configurations/extract-css.html

npm install extract-text-webpack-plugin --save-dev

通常只須要在生成環境提取出來，因而在webpack.prod.conf.js中添加

vue: { loaders: { css: ExtractTextPlugin.extract('vue-style-loader', 'css'), // you can also include <style lang="less"> or other langauges less: ExtractTextPlugin.extract('vue-style-loader', 'css!less') } } 

在plugins中加入new ExtractTextPlugin("static/css/style.css")，這樣css就是在output/static/css中生成style.css文件

4、引用圖片

若是template中或style中引用了圖片，須要添加file-loader

參考：https://vue-loader.vuejs.org/en/configurations/asset-url.html

1.下載file-loader npm install --save-dev file-loader
2.在webpack.base.conf.js中的loaders裏邊添加

{ test: /\.png$|\.jpg$|\.gif$|\.ico$/, loader: "file?name=static/img/[name].[hash].[ext]", exclude: /node_modules/ } 

5、實現懶加載（按需加載）

在頁面比較多的時，單頁應用按照以前的方式打包成一個js會致使首頁加載時很慢，爲了解決這個問題，能夠修改打包，讓首頁只加載通用代碼和首頁要用到的代碼，跳轉到其餘頁面再加載對應頁面的js，這樣能夠解決項目較大首頁加載緩慢的問題。

官方文檔地址

1.修改路由

將要經過懶加載的路由的compenent改寫成

const Plugin = r => require.ensure([], () => r(require('../views/Plugins/plugin')), 'Plugin'); 

具體路由頁面以下：

 

Paste_Image.png

2.修改webpack配置

在webpack.prod.conf.js中的output中添加

chunkFilename: 'static/js/[id].[name]_[chunkhash:7].js'

運行 npm run build 這個時候就能夠看到每個require.ensure引入的模塊都單獨生成了一個js

 

Paste_Image.png

運行npm run prod啓動生產環節，訪問頁面http://localhost:3001/
由於我沒有定義首頁路由，因此會跳轉到下面模塊中：

 

Paste_Image.png

查看請求，只請求了index.js和notFoundComponent.js。

 

Paste_Image.png

訪問我定義的路由的http://localhost:3001/plugin（根據你本身定義的路由查看），能夠看到除了公用的index.js覺得，其餘js並無加載，若是經過路由跳轉的話也不用從新加載index.js

 

Paste_Image.png

細心的你若是仔細看的話會發現一個問題，除了app.vue裏邊的css打包到style.css外，其餘vue裏的js並無打包進去

因而還須要在webpack.prod.conf.js的plugins中將

new ExtractTextPlugin("static/css/style.css") 

修改成

//實現css分塊，講全部vue文件中的css打包到一個一個入口css中 new ExtractTextPlugin('static/css/[id].[name]_[chunkhash:7].css', { allChunks: true }) //加上這個插件，能夠將通用的css和js單獨打包成一個vendors.css和vendors.js new webpack.optimize.CommonsChunkPlugin({ name:'vendors', filename:'static/js/[id].[name].[hash].js', minChunks: function () { return true } }) 

minChunks:num 表示require了num此才放在CommonChunk裏邊

再次執行npm run build會生成一下目錄

 

Paste_Image.png

會發現app.vue裏邊的css被打包到了vendor.css中了，app.vue裏的js和vue/vue-router被打包到了vendor.js中。

這樣就基本完成了懶加載。

可是尚未實現如何將css安裝vue文件打包成單獨的文件，請大神多多指教！

備忘：生命週期（參考）

 

Paste_Image.png

 

 

 

3人點贊

 

技術博客

做者：愛扎馬尾的小獅子 連接：https://www.jianshu.com/p/1696e256d774 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。