非webpack require.js + vue + vueRouter + iView 實現按需載入

適合一個人開發的時候，在整個php框架下，又想單頁，又可以直接後端assign變數穿透到模板。又不想寫介面搞前後分離腳手架一大堆npm 包,

在php模板下引入require.js

<!DOCTYPE html>
<html lang="zh_CN" style="overflow: hidden;">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <meta charset="utf-8">
    <title>{:lang('ADMIN_CENTER')}</title>
    <meta name="description" content="This is page-header (.page-header &gt; h1)">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link href="__TMPL__/public/assets/themes/{:cmf_get_admin_style()}/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <!--<script src="__TMPL__/public/assets/js/lib/require.min.js" data-main="../../js/main.js"></script>-->
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script src="__TMPL__/public/assets/js/require.js" defer async="true" data-main="__TMPL__/public/page/init"  ></script>
</body>
</html>

然後在require.js 中配置

// 全域性配置

require.config({
    baseUrl: '/themes/admin_simpleboot3/public/',
    paths: {
        text: 'assets/js/require.text',
        css: 'assets/js/require.css',
        // 引入jQuery
        jquery: 'assets/js/jquery-1.10.2.min',
        vue: 'assets/js/vue',
        vueRouter: 'assets/js/vue-router',
        iview: 'assets/js/iview.min',
        loadComponent: 'assets/js/loadComponent',
        main: 'page/main',
        user: 'page/user',
        userc: 'page/user',

    },
    shim: {
        iview: {
            deps: ['vue'],
            exports: 'iview'
        },
    },
    map: {
    }
})

//全域性配置
require(['vue', 'iview', 'vueRouter', 'css!assets/css/common'], function (Vue, iView, VueRouter) {


    //按需載入
    var setComponent = function (name, component) {
        Vue.component(name, function (resolve, rejectreject) {
            require([component],function (params) {
                resolve(params)
            })
        });
    }


    setComponent('w-main', 'main');
    setComponent('w-user','user');



    const routes = [
        {path: '/', component: {template: '<w-main></w-main>'},children:[
                {path: '/user', component: {template: '<w-user></w-user>'}},
                {path: '/bar', component: {template: '<div>bar</div>'}},
                {path: '/foot', component: {template: '<div>foot</div>'}}
         ]},
    ]
    const router = new VueRouter({
        routes // (縮寫) 相當於 routes: routes
    })




    Vue.use(iView)
    Vue.use(VueRouter)

    var vue = new Vue({
        el: "#app",
        router,
        data: {
            msg: "1",
        }
    });
})

使用require.text.js 載入頁面，使用require.css.js 載入css

require.text.js 直接獲取後端

define(['vue','text!/admin/main','css!assets/css/main'],function (Vue,html) {
      return {
          template:html,
          data () {
              return {
                  isCollapsed: false
              }
          },
          computed: {
              rotateIcon () {
                  return [
                      'menu-icon',
                      this.isCollapsed ? 'rotate-icon' : ''
                  ];
              },
              menuitemClasses () {
                  return [
                      'menu-item',
                      this.isCollapsed ? 'collapsed-menu' : ''
                  ]
              }
          },
          methods: {
              collapsedSider () {
                  this.$refs.side1.toggleCollapse();
              }
          }
      }
});

切換路由可以看到user 是按需載入的並沒有一次新載入完成

非webpack require.js + vue + vueRouter + iView 實現按需載入

適合一個人開發的時候，在整個php框架下，又想單頁，又可以直接後端assign變數穿透到模板。又不想寫介面搞前後分離腳手架一大堆n

Vue.js中用webpack合併打包多個元件並實現按需載入

對於現在前端外掛的頻繁更新，所以多多少少要對元件化有點了解，下面這篇文章主要給大家介紹了在Vue.js中用webpack合併打包多個元件並實現按需載入的相關資料，需要的朋友可以參考下。前言隨著移動裝置的升級、網路速度的提高，使用者對於web應用的要求越來越高，web

vue專案實現按需載入的3種方式：vue非同步元件、es提案的import()、webpack的require.ensure()

1. vue非同步元件技術 vue-router配置路由，使用vue的非同步元件技術，可以實現按需載入。但是，這種情況下一個元件生成一個js檔案。舉例如下： { path: '/promisedemo', na

vue專案優化之按需載入元件-使用webpack require.ensure

用 vue-cli構建的專案,在預設情況下 ,執行 npm run build 會將所有的js程式碼打包為一個整體, 打包位置是 dist/static/js/app.[contenthash].js 類似下面的路由程式碼 router/index.j

vue開發之路由按需載入

通過vue寫的單頁應用時，可能會有很多的路由引入。就像圖片的懶載入一樣，如果客戶根本就沒有看到那些圖片，而我們卻在開啟頁面的時候全部給載入完了，這樣會大大的增加請求的時間，降低使用者的體驗程度。使用 vue-cli構建的專案,在預設情況下 ,

react-router4 實現按需載入並利用withRouter傳遞props

bundle.jsx import React, {Component} from 'react' export default class Bundle extends Component { componentWillMount() { t

按需載入並管理CSS樣式/JS指令碼 -在檢視中按需載入js 或css +yii2

1 載入css$cssString = ".gray-bg{color:red;}"; $this->registerCss($cssString); 2 載入js塊<?php $this->beginBlock('test') ?>

pdfjs優化，實現按需載入，節省流量和記憶體

1 問題　　當使用pdfjs來實現預覽功能的時候，遇到了2個問題：　　一是頻寬佔用過大，會下載整個pdf檔案，這對部署在公網的應用來說，成本壓力很大，因為雲服務頻寬是很貴的。　　二是記憶體佔用過大，一個80M的pdf，在預覽時佔用記憶體高達600M，在一些記憶體較小的手機上容易發生崩潰。　　pdfjs

vue專案優化之使用webpack按需載入資源（require.ensure）

router/index.js 路由相關資訊,該路由檔案引入了多個 .vue元件import Hello from '@/components/Hello' import Province from '@/components/Province' import Segment

vue2+iview+require實現AMD模式下的元件化開發、按需載入

1、最近專案遇到的需求：不使用webpack, 採用老設計模式AMD，實現按需載入，元件化開發 css樣式採用less模組化，未在webpack中配置less-loader,藉助less.js在客戶端編譯（此方法不可取，需優化） 3、設計思路：

基於webpack實現react元件的按需載入

隨著web應用功能越來越複雜，模組打包後體積越來越大，如何實現靜態資源的按需載入，最大程度的減小首頁載入模組體積和首屏載入時間，成為模組打包工具的必備核心技能。 webpack作為當下最為流行的模組打包工具，成為了react、vue等眾多熱門框架的官方推薦打包工具。其提供的Code Splitt

按需載入iviei元件時，引入vue專案報iview is not defined解決辦法（使用vue-vli + iview）

解決方法 npm 下載(我使用了淘寶映象)： cnpm install iview --save cnpm install babel-plugin-import --save-dev .babelrc檔案 { "presets": [ ["env", {

vue如何實現程式碼打包分離（按需載入）

在vue中使用import()來代替require.ensure()實現程式碼打包分離一、require.ensure() 方法來實現程式碼打包分離 require.ensure() 是 webpack 特有的，已經被 import() 取代。 require.en

vue專案引用 iView 元件——全域性安裝與按需載入

隨著Vue框架的熱度，出現了不少基於Vue的UI元件庫，這次專案用到了 iView 這個元件庫。使用方法官網很詳細。官網：https://www.iviewui.com/ 這篇文章主要是記錄一下npm 全域性安裝以及按需引用的用法。一、全域性引用 ①、先安裝iview&nbs

vue專案實現路由按需載入(路由懶載入)的3種方式

vue專案實現按需載入的3種方式 vue非同步元件 es提案的import() webpack的require,ensure() 1 . vue非同步元件技術 ==== 非同步載入 vue-router配置路由 , 使用vue

Vue專案中實現圖片懶載入

---對於圖片過多的頁面，為了加速頁面載入速度，所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做載入，等到滾動到可視區域後再去載入。這樣子對於頁面載入效能上會有很大的提升，也提高了使用者體驗

vue專案優化之頁面的按需載入(vue+webpack)

vue+webpack實現頁面的按需載入通過vue寫的單頁應用時，可能會有很多的路由引入。當打包構建的時候，javascript包會變得非常大，影響載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應的元件，這樣就更加高效

angularjs ocLazyLoad分步加載js文件,angularjs ocLazyLoad按需加載js

path 技術分享 active meta 代碼效果 function 初始化 reat 用angular有一段時間了,平日裏只顧著寫代碼,沒有註意到性能優化的問題,而今有時間,於是捋了捋,講學習過程記錄於此: 問題描述:由於采用angular做了網頁的單頁面應用,

javascript面向物件程式設計--惰性例項化（實現按需例項化）

javascript是以物件為基礎，以函式為模型，以原型為繼承機制的開發模式惰性例項化：避免在頁面中使用javascript初始化執行時就例項化類，而是將一些類的例項化推遲到需要時候才去例項化，避免資源過早的消耗 var myNamespace=function(){ &

腦闊疼的webpack按需載入

Q1: 什麼是按需載入？隨著單頁應用發展的越來越龐大，拆分js就是第一要務，拆分後的js，就可以根據我們需求來有選擇性的載入了。所以第一個問題，就是js怎麼拆？ Q2：js怎麼拆？ 1，未拆分前是什麼樣子？來個demo，先看一下未拆分之前是什麼樣子： a.js: import b

非webpack require.js + vue + vueRouter + iView 實現按需載入

相關推薦