使用Vue構建一個延遲載入路由器和最新的瀏覽器特性
延遲載入是創建性能網頁和應用程序的一個很好的工具。了解如何使用Vue構建一個延遲載入路由器。js只用了幾行JavaScript代碼。
學習如何使用Crafter CMS構建現代數字體驗應用程序。
動態模塊導入是主要瀏覽器的最新JavaScript特性之一。該特性的主要用例是延遲載入模塊，允許在需要時交付內容，而不是一次性交付所有內容。
在本文中，我將演示如何使用Vue構建一個延遲載入路由器。js只需要幾行代碼。這將在已經實現動態模塊導入的瀏覽器中實現，但我還將為舊的瀏覽器提供一個回退。
在GitHub上抓取已完成的代碼。
靜態JavaScript模塊進口
如果您使用的是最新版本的任何主流瀏覽器，那麼您現在可以執行靜態導入/導出。Vue。js，這意味著您可以從這樣的文件中導出組件定義:
BooksPage.js
export default {
name: "BooksPage",
template: `
Books Page
{{ message }}
`,
data() {
return {
message: "Oh hai from the books page"
}
}
};
然後把它導入你的app中:
app.js
import BooksPage from "./BooksPage";
new Vue({
components: {
BooksPage
}
});
製作組件JavaScript模塊允許你組織你的應用程序，這樣每一個「頁面」都在一個不同的文件中。如果您使用Vue，這不是什麼新東西。js單文件組件，但是現在有了本地支持，這個架構可以在沒有Webpack或Babel的情況下實現。
我負責導入Vue封面。js組件作為JavaScript模塊在最近的文章Vue中更加深入。js單文件JavaScript組件在瀏覽器。
動態JavaScript模塊進口
如果您的組件表示頁面，那麼最好是按需獲取模塊文件，這樣用戶就不必下載他們不訪問的頁面。然而，靜態導入在編譯時解析。這意味著你不能從"./BooksPage"中輸入進口圖書。在if語句中有條件地裝入它。相反，您的靜態導入將在載入它們的腳本運行時立即開始下載。
這就是動態導入的切入點。這些可以在運行時確定，這意味著您可以根據需要有條件地載入一個JavaScript模塊，因此可以載入頁面。注意，動態導入返回了一個解決模塊內容的承諾。
import HomePage from "./pages/HomePage.js";
Vue.component("my-router", {
template: "",
data() {
return {
page: HomePage
}
},
methods: {
navigate(name) {
this.page = return () => import(`./$Page.js`)
}
}
});
注意:組件是一個內置的「元」組件，它通過支持組件來接受組件定義。與所有Vue組件一樣，這可以是組件定義，也可以是解決組件定義的承諾。
如果您正在使用最新的Safari或Chrome Canary，這段代碼將在瀏覽器中自動運行，其他瀏覽器也將緊隨其後。
創建一個小的延遲載入路由器
考慮到這個理論，讓我們來做一個延遲載入路由器。在應用程序模板中，創建一些錨標記，其中href是該頁面的組件模塊的路徑。偵聽這些元素上的click事件，防止重定向，並觸發一個方法，導航。
index.html
Books
Movies
Games
我們將在Vue實例中定義導航方法，它將接受單擊事件作為參數。使用鏈接的href值，即event.target。路徑名，動態導入所需的頁面組件模塊，並將其分配給本地頁面狀態屬性。這是動態綁定到組件組件的。
app.js
import BooksPage from "./pages/BooksPage.js";
new Vue({
el: "#app",
data: {
page: BooksPage
},
methods: {
navigate(event) {
this.page = () => import(`./$`)
// Vue.js
// .then(m => m.default)
;
}
}
});
注意Vue的版本。在2.5.0之前，需要包含一個回調以正確解析模塊定義。
就是這樣!如果您在支持動態導入的瀏覽器中運行此操作，您將看到以下內容:
回退
那些沒有最新版本的Safari或Chrome的用戶呢?他們需要一個回退。讓我們用Webpack創建一個。
首先，我們需要修改導航方法。Webpack的import()實現要求它提前知道哪些文件可能需要動態載入。您不需要指定確切的模塊名稱，只需確保您提供的值是可解析的文件或目錄。
要做到這一點,我們將改變動態目錄和文件名所以指定頁面提取文件名的href。。/頁面/ $ { event.target.pathname.split(「/」).pop()}。在編譯時，Webpack非常聰明，它知道這意味著「頁面目錄中的某個文件」，並將處理這個目錄中的任何JavaScript文件。
其次，我們需要將注釋/* webpackChunkName:「頁面/[請求]」*/在函數中，這樣Webpack就知道將這段代碼提取到一個單獨的文件中。否則，Webpack將把所有頁面組件模塊捆綁在一個文件中，延遲載入的好處將被放棄。
app.js
navigate(event) {
this.page = () => import(
/* webpackChunkName: "pages/[request]" */
`./pages/$`
)
}
Webpack配置
您可以使用這個簡單的Webpack配置，它有兩個顯著的特點:
指定一個chunkFilename輸出屬性。這確保了頁面組件模塊在Webpack輸出中被正確命名。
將JavaScript與Babel進行傳輸。為了識別動態導入語句，您需要插件語法-動態導入。
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: "./app.js",
output: {
path: path.resolve(__dirname, "./dist"),
publicPath: "/dist/",
filename: "build.js",
chunkFilename: "[name].js"
},
module: {
rules: [
{
test: /.js$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
plugins: [require("babel-plugin-syntax-dynamic-import")]
使用該配置運行Webpack，您將得到構建文件，包括:
所有的JavaScript模塊文件都轉換到CommonJS模塊。
主包將包括Webpack的動態導入實現。
檢查動態導入支持
如何告訴瀏覽器使用回退?據我所知，沒有特定的方法來檢查瀏覽器對import()的支持。我的策略是在文檔主體中使用內聯腳本，該腳本創建一個新的腳本標記，並根據對import()的支持有條件地更改源(主腳本或回退)。
var script = document.createElement("script");
try {
Function("import("")");
script.src = "app.js";
script.type = "module";
} catch(e) {
script.src = "dist/build.js";
script.type = "text/javascript";
}
document.body.appendChild(script);
注意，回退腳本被視為一個普通的JavaScript腳本，而主腳本被當作一個模塊處理。
結論
如果我們可以使用JavaScript模塊導入的原生實現來實現像延遲載入這樣的優化，那麼就可以使用更小的文件大小和更簡單的實現。例如，Webpack的import()的實現要求它提前知道它可能需要動態載入的文件，而本機實現則不需要。
在實踐中，像這樣的特性需要逐步增強，因此需要Webpack作為一個後備，重新引入同樣的複雜性。哦，那是你的網頁開發。
得到最新的Vue。js文章，教程，和酷項目在你的收件箱和Vue。js開發人員通訊。
Crafter是一個現代的CMS平台，用於構建現代網站和內容豐富的數字體驗。現在電子書下載。與Crafter軟體合作帶來的。
TAG:愛碼農 |