require.js 加載 vue組件 r.js 合併壓縮

時間 2020-06-14

標籤 require.js require 加載 vue 組件 r.js 合併壓縮欄目 JavaScript 简体版

原文原文鏈接

https://www.taoquns.com 本身搭的我的博客css

require.js 參考阮一峯 Javascript模塊化編程(三)：require.js的用法
r.js 合併壓縮參考司徒正美 r.js合併實踐html

準備：

vue.js 本來是學習vue組件
require.js 而後想到用require 加載
r.js 文件太多合併

文件目錄

忽略部分文件及文件夾前端

1、先說vue 組件

先引入vue 再引入vue組件
Vue.extend({}) 定義組件 template data methods
Vue.component()，註冊組件的標籤，標籤在html中是一個掛載點
new Vue() 進行實例化

index.htmlvue

// css引入 略


 <div id="header">
        <tq-header></tq-header>
    </div>

<div id="footer">
    <tq-footer></tq-footer>
</div>

<script src="lib/vue.js"></script>
<script src="/vue-module/tq-header.js"></script>
<script src="/vue-module/tq-footer.js"></script>

tq-header.jsnode

//數據
    var data = {
        list: [{
            name: "首頁",
            url: "./index.html",
        }, {
            name: "博客",
            url: "http://taoquns.com"
        }, {
            name: "微博",
            url: "http://weibo.com/1654438844/profile?topnav=1&wvr=6"
        }, {
            name: "簡書",
            url: "http://www.jianshu.com/users/633b8f612f8e/latest_articles"
        }, {
            name: "做品展現",
            url: "http://taoquns.com/mypage"
        }],
    };

    //定義組件 模板 數據 方法
    var header = Vue.extend({
        template:  '<div class="header">\
                        <div class="header-main">\
                            <ul>\
                                <li v-for="i in list">\
                                    <a v-bind:href="i.url">\
                                        {{i.name}}\
                                    </a>\
                                </li>\
                            </ul>\
                        </div>\
                    </div>',

        data: function() {
            return data;
        },

        methods: {
            show: function() {

            }
        },
    });


    // 註冊組件標籤 <tq-header> 綁定組件 
    Vue.component('tq-header', header);

    //實例化
    new Vue({
        el: '#header'
    });

tq-footer.js編程

// 定義組件內容，數據，方法
    var footer = Vue.extend({
       //模板
        template: '<div class="footer">test footer test footer</div>',
        //數據
        data: function() {
            return {
                name: 'test name'
            }
        },
        //方法
        methods: {
            show: function() {
                alert(this.name);
            }
        }
    });

    // 註冊組件的標籤 <tq-footer> 綁定組件
    Vue.component('tq-footer', footer);

    //實例化
    new Vue({
        el: '#footer',
    });

    //vue組件結束

2、使用require 加載 vue 組件

引入require.js
data-main 制定主模塊，負責引入哪些文件
子組件須要用 define()函數包裹見例子

將vue 和vue組件的引入註釋掉,引入require.js data-main 指定主模塊文件 js文件夾下的 script.jsruby

<script src="lib/require.js" data-main="js/script.js"></script>
    <!-- 註釋 -->
    <!-- <script src="./lib/vue.js"></script> -->
    <!-- <script src="./vue-module/tq-header.js"></script> -->
    <!-- <script src="./vue-module/tq-footer.js"></script> -->
    <!-- <script src="vue-module/tq-img-view.js"></script> -->

配置script.js文件看阮一峯的require.js服務器

baseUrl 默認路徑基目錄
shim 非AMD規範的文件
paths 制定各個模塊的加載路徑

script.js前端優化

require.config({
	baseUrl:'lib',
	shim:{
		'vue':{
			exports:'vue'
		}
	},
	paths:{
		'vue':'../lib/vue',
		'header':'../vue-module/tq-header',
		'footer':'../vue-module/tq-footer'
	},
});

require(['vue','header','footer'],function(vue,header,footer){

});

這樣主模塊就依賴三個組件，異步加載這個三個文件異步

vue 組件用define() 包裹
因爲子組件依賴vue，因此須要寫好依賴，並將參數Vue傳進去如:

// 函數參數Vue 大寫的V哦
// 這樣內部的調用Vue.extend() 等方法就能夠正常使用了
define(['vue'],function(Vue){
    Vue.exxtend({...});
    Vue.component(.....);
    new Vue({....});

})；

tq-header.js 和以前差很少就是加了define()

// 頭部 header

//require define 函數 start
define(['vue'], function(Vue) {


    //數據
    var data = {
        list: [{
            name: "首頁",
            url: "./index.html",
        }, {
            name: "博客",
            url: "http://taoquns.com"
        }, {
            name: "微博",
            url: "http://weibo.com/1654438844/profile?topnav=1&wvr=6"
        }, {
            name: "簡書",
            url: "http://www.jianshu.com/users/633b8f612f8e/latest_articles"
        }, {
            name: "做品展現",
            url: "http://taoquns.com/mypage"
        }],
    };

    //定義組件 模板 數據 方法
    var header = Vue.extend({
        template: '<div class="header">\
                        <div class="header-main">\
                            <ul>\
                                <li v-for="i in list">\
                                    <a v-bind:href="i.url">\
                                        {{i.name}}\
                                    </a>\
                                </li>\
                            </ul>\
                        </div>\
                    </div>',

        data: function() {
            return data;
        },

        methods: {
            show: function() {

            }
        },
    });


    // 註冊組件標籤 <tq-header> 綁定組件
    Vue.component('tq-header', header);

    //實例化
    new Vue({
        el: '#header'
    });
});
//require define 函數 end

tq-footer.js

// 尾部 footer 
// require.js define() 函數包裹
define(['vue'], function(Vue) {

    //vue 組件
    /*
     * template html模板文件
     * data 數據 返回函數中返回對象
     * methods 方法集合
     */
     
    // 定義組件內容，數據，方法
    var footer = Vue.extend({

        template: '<div class="footer">\
        <div class="footer-main">\
            <p>taoqun我的博客 | 記錄 | 展現 | 使用vue\
                <a href="mailto:taoquns@foxmail.com">聯繫我：email</a>\
            </p>\
        </div>\
    </div>',

        data: function() {
            return {
                name: 'function'
            }
        },

        methods: {
            show: function() {
                alert(this.name);
            }
        }

    });

    // 註冊組件的標籤 <tq-footer> 綁定組件
    Vue.component('tq-footer', footer);

    //實例化
    new Vue({
        el: '#footer',
    });

    //vue組件結束

});
//define end

require 方法預覽成功

3、r.js 合併壓縮

使用require 的方式會加載不少的js文件，咱們都知道這樣會產生對服務器的屢次請求，優化性能第一就是減小http請求次數

簡單的說下r.js
r.js是requireJS的優化（Optimizer）工具，能夠實現前端文件的壓縮與合併，在requireJS異步按需加載的基礎上進一步提供前端優化，減少前端文件大小、減小對服務器的文件請求。

就是寫一個配置文件，將頁面須要的js組件文件合併到一個，而後require.js 直接引用合併壓縮後的文件就能夠了，只須要加載一個文件。

準備

r.js 下載一個r.js文件放到目錄中
node.js 本地須要安裝node.js

這裏咱們將r.js 放到js文件中，創建一個build.js 配置文件

而後說下build.js 的配置
build.js

({
	baseUrl:'../vue-module/',
	paths:{
		'header':'tq-header',
		'footer':'tq-footer',
		'imgview':'tq-img-view',
		'vue':'../lib/vue',
	},
	name:'script',
	out:'main.js'
})

我這裏比較簡單

baseUrl 設置基目錄
paths 模塊的引用
name 主模塊的引用
out 輸入位置

而後控制檯定位到r.js目錄下 node r.js -o build.js 命令進行合併壓縮，當目錄下出現main.js 文件時，表示成功了。

而後將 index.html 中 data-main 原來的script.js改爲 main.js 打開就行了

<script src="lib/require.js" data-main="js/main.js"></script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。