vue項目實現按需加載的3種方式：vue異步組件、es提案的import()、webpack的req

X_AirDu 發布于2019-08-21 16:59 / 2804人閱讀

摘要：但是，這種情況下一個組件生成一個文件。提供的配置路由，使用的技術，也可以實現按需加載。這種情況下，多個路由指定相同的，會合并打包成一個文件。舉例如下詳細代碼在倉庫項目路由配置文件

1. vue異步組件技術

vue-router配置路由，使用vue的異步組件技術，可以實現按需加載。

但是，這種情況下一個組件生成一個js文件。
舉例如下：

        {
            path: "/promisedemo",
            name: "PromiseDemo",
            component: resolve => require(["../components/PromiseDemo"], resolve)
        }

2. es提案的import()

推薦使用這種方式(需要webpack > 2.4)

webpack官方文檔：webpack中使用import()

vue官方文檔：路由懶加載(使用import())

vue-router配置路由，代碼如下：

// 下面2行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。
const ImportFuncDemo1 = () => import("../components/ImportFuncDemo1")
const ImportFuncDemo2 = () => import("../components/ImportFuncDemo2")
// 下面2行代碼，指定了相同的webpackChunkName，會合并打包成一個js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: "ImportFuncDemo" */ "../components/ImportFuncDemo")
// const ImportFuncDemo2 = () => import(/* webpackChunkName: "ImportFuncDemo" */ "../components/ImportFuncDemo2")
export default new Router({
    routes: [
        {
            path: "/importfuncdemo1",
            name: "ImportFuncDemo1",
            component: ImportFuncDemo1
        },
        {
            path: "/importfuncdemo2",
            name: "ImportFuncDemo2",
            component: ImportFuncDemo2
        }
    ]
})

3. webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需加載。

這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。
舉例如下：

        {
            path: "/promisedemo",
            name: "PromiseDemo",
            component: resolve => require.ensure([], () => resolve(require("../components/PromiseDemo")), "demo")
        },
        {
            path: "/hello",
            name: "Hello",
            // component: Hello
            component: resolve => require.ensure([], () => resolve(require("../components/Hello")), "demo")
        }

詳細代碼在github倉庫：https://github.com/cag2050/vu...

項目路由配置文件：https://github.com/cag2050/vu...

云服務器 GPU云服務器 vue的計算屬性 vue的cdn加速 vue組件 webpack按需加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88982.html

webpack 基礎與項目優化實踐總結

摘要：前言本文基于，主要涉及基本概念基本配置和實際項目打包優化。關于概念方面參考官網，常用配置來自于網絡資源，在文末有相關參考鏈接，實踐部分基于自己的項目進行優化配置。同一文件中，修改某個影響其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實際項目打包優化。關于概念方面參考官網，常用配置來自于網絡資源，在文末有相關參考鏈接，實踐部分基于自己的項目進行...

Scorpion 2019-08-23 18:15 評論0 收藏0
Vue.js 子組件的異步加載及其生命周期控制

摘要：本文主要對組件化開發中子組件的異步加載和其生命周期進行一些探討。異步組件討論異步加載，需要先了解下異步組件。生命周期控制在使用子組件或者叫局部注冊時，我們可能需要在子組件實例化或者叫創建完畢后做某些事情。前端開發社區的繁榮，造就了很多優秀的基于 MVVM 設計模式的框架，而組件化開發思想也越來越深入人心。這其中不得不提到 Vue.js 這個專注于 VM 層的框架。本文主要對 Vue...

lidashuang 2019-08-22 11:17 評論0 收藏0
vue開發看這篇文章就夠了

摘要：注意此處獲取的數據是更新后的數據，但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新，所以你現在可以執行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架庫和框架的區別我們所說的前端框架與庫的區別？ Library 庫，本質上是一...

fsmStudy 2019-08-21 18:37 評論0 收藏0
從0到1搭建webpack2+vue2自定義模板詳細教程

摘要：安裝安裝完成之后，你應該可以使用了，方式如下上述命令應該自動在瀏覽器中打開。前言 webpack2和vue2已經不是新鮮東西了，滿大街的文章在講解webpack和vue，但是很多內容寫的不是很詳細，對于很多個性化配置還是需要自己過一遍文檔。Vue官方提供了多個vue-templates，基于vue-cli用官方的webpack模板居多，不過對于很多人來說，官方的webpack模板的配...

cartoon 2019-08-20 16:38 評論0 收藏0
vue開發項目完全指南

摘要：有兩種方法，一種是在開發環境中設置通過的，另一種是在服務器上修改的配置設置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動去除統一管理在項目開發過程中，會涉及到很多接口的處理，當項目足夠大時，就需要統一管理接口。這篇文章總結了vue項目的所遇到的問題，包括跨域、用戶認證、接口統一管理、路由配置、兼容性處理，性能優化等內容。項目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 評論0 收藏0