【PC網站前端架構探討系列】結合公司網站首頁,談前端模塊化開發與網站性能優化實踐

說在前面

      上午給你們分享的我的認爲比較全,比較官方,比較清晰的grunt使用教程,被挪出首頁了,不過不要緊,畢竟不是原創,你們想看,我如今貼出地址:css

     http://www.cnblogs.com/sybboy/p/4877055.htmlhtml

    下面但是我本身的東西,算是這段時間搞前端架構的總結吧:前端

 

目錄

 

1.遇到的問題jquery

2.目標json

3.如何解決架構

4.結果分析dom

5.還沒有解決ide

 

 

遇到的問題

   

  問題1----腳本混亂,沒有層次和固定代碼位置模塊化

  問題2----腳本和css請求較多,請求未壓縮,文件未壓縮合並grunt

  問題3----代碼目錄混亂,引用不清晰

  問題4----腳本和css沒有添加版本號管理

  

   

目標 

   1.整理頁面的代碼,必要的代碼模塊化

   2.文件合併壓縮,外部引用的腳本要加密混淆

   3. 網站目錄下,全部腳本 樣式 圖片統一存放

   4. 添加版本號

 

如何解決

  

     問題1----腳本混亂,沒有層次和固定代碼位置

     

      使用seajs 將代碼模塊化,用define關鍵字定義模塊,用require調用外部腳本類庫及插件,模塊內部使用json形式將文件中的代碼按業務以及功能分類梳理

     

 

      使用說明:

       1.頁面首先引用seajs庫

       2.按照固定格式 ,封裝代碼模塊

          

 1    define([「jquery」,‘../index-plugin.min’],function(require){       
 2                                                                   //方括號中的爲依賴項
 3 
 4                   var $=require(‘jquery’);            //require 調用依賴項
 5 
 6                    require(‘../index-plugin.min’)($);    //插件調用方式
 7 
 8                    var MOD = { 方法A:function(參數){},方法B…..};
 9 
10                    return MOD;
11 
12    });
View Code

 

       3.頁面配置seajs以及引用模塊代碼

              現全站配置統一放於config.js

             具體配置說明:http://liuxiaofan.com/2013/12/11/1547.html 

         

             引用:

            seajs.use([‘jquery’,‘business/index.min’],function($,I){  //1.這裏是方法內容  2.方括號中的爲引用的類庫以及模塊文件  3. 參數中分別對應相應的引用             } )    

 

   問題2----腳本和css請求較多,請求未壓縮,文件未壓縮合並

 

   頁面的腳本和樣式處理統一使用的grunt來處理,使用很簡單:

  

   安裝過程內容比較多,具體看下個人技術博客:

        http://www.cnblogs.com/sybboy/p/4877055.html

   

      注意使用grunt,我的感受配置很重要,命令就一個grunt,這是我用到的配置:

      

  1   module.exports = function(grunt) {
  2 
  3     // 配置
  4 
  5      grunt.initConfig({
  6 
  7         pkg : grunt.file.readJSON('package.json'),
  8 
  9         // uglify : {
 10 
 11             // options : {
 12 
 13                 // banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 14 
 15             // },
 16 
 17             // build : {
 18 
 19                 // src : 'src/js/index.js',
 20 
 21                 // dest : 'dest/js/index.min.js'
 22 
 23             // }
 24 
 25         // }
 26 
 27   // concat : {
 28 
 29             // domop : {
 30 
 31                 // src: ['src/index-plugin.min.js','wow.min.js'],
 32 
 33                 // dest: 'dest/index-plugin2.min.js'
 34 
 35             // }
 36 
 37         // }
 38 
 39     // cssmin: {
 40 
 41       // add_banner: {
 42 
 43   // // options: {
 44 
 45     // // banner: '/* index css file by peng 20151009*/'
 46 
 47   // // },
 48 
 49   // files: {
 50 
 51     // 'dest/css/index.min.css': ['src/css/**/*.css']    // 合併並壓縮 path/to 目錄下(包含子目錄)的全部css文件
 52 
 53   // }
 54 
 55      // }
 56 
 57     // combine: {
 58 
 59   // files: {
 60 
 61     // 'path/to/output.css': ['path/to/input_one.css', 'path/to/input_two.css']
 62 
 63   // }
 64 
 65     // },
 66 
 67     // minify: {
 68 
 69   // expand: true,        // 啓用下面的選項
 70 
 71   // cwd: 'src/css/',    // 指定待壓縮的文件路徑
 72 
 73   // src: ['*.css', '!*.min.css'],    // 匹配相對於cwd目錄下的全部css文件(排除.min.css文件)
 74 
 75   // dest: 'dest/css/',    // 生成的壓縮文件存放的路徑
 76 
 77   // ext: '.min.css'        // 生成的文件都使用.min.css替換原有擴展名,生成文件存放於dest指定的目錄中
 78 
 79     // }
 80 
 81   //}
 82 
 83   // uncss: {
 84 
 85     // dist: {
 86 
 87   // // options: {
 88 
 89     // // ignore: ['#added_at_runtime', '.created_by_jQuery']
 90 
 91   // // },
 92 
 93   // files: {
 94 
 95     // 'src/css/index_base.css': ['src/html/index.html']
 96 
 97   // }
 98 
 99     // }
100 
101     // },
102 
103     imagemin: {
104 
105             /* 壓縮圖片大小 */
106 
107             dist: {
108 
109                 options: {
110 
111                     optimizationLevel: 3 //定義 PNG 圖片優化水平
112 
113                 },
114 
115                 files: [
116 
117                         {
118 
119   expand: true,
120 
121   cwd: 'src/img/activity',
122 
123   src: ['**/*.{png,jpg,gif}'], // 優化 img 目錄下全部 png/jpg/jpeg 圖片
124 
125   dest: 'dest/img/activity' // 優化後的圖片保存位置,覆蓋舊圖片,而且不做提示
126 
127                        }
128 
129                     ]
130 
131                 }
132 
133             }
134 
135     });
136 
137    
138 
139     // 載入concat和uglify插件,分別對於合併和壓縮
140 
141     //grunt.loadNpmTasks('grunt-contrib-concat');
142 
143     //grunt.loadNpmTasks('grunt-contrib-uglify');
144 
145   //grunt.loadNpmTasks('grunt-contrib-cssmin');
146 
147   //grunt.loadNpmTasks('grunt-uncss');
148 
149   grunt.loadNpmTasks('grunt-contrib-imagemin');
150 
151     // 註冊任務
152 
153     grunt.registerTask('default', ['imagemin']);
154 
155 };
156 
157  
View Code

 

結果分析

  以前:

     首頁樣式與腳本的請求

      

   

 

結合yslow,能夠看出首頁總共有74個請求,總共1882kb,其中腳本11個請求,180kb左右,加載腳本須要2.68s;樣式8個請求,佔324kb,加載樣式所需35ms,大部分請求在圖片

  以後:

    首頁樣式與腳本的請求

    

   

結合yslow,能夠看出優化後的首頁總共有63個請求,總共1631kb,其中腳本9個請求,150kb左右,加載腳本須要2.2s;樣式2個請求,佔200kb,加載樣式所需8ms,大部分請求在圖片

 

   結論:頁面請求減小11個,請求總量減小250多kb,請求時間減小0.5s左右

 

  還沒有解決

     

   很明顯經過上次優化,請求量以及時間仍是個問題,效果不太明顯,下面是使用page speed分析的結果:

   

  問題一:

  網站的請求沒有進行gzip壓縮,預計壓縮後請求尺寸至少小一半

     

     

     問題二:

  圖片過大,能夠適當壓縮

     

  問題三:

  頁面的HTML代碼壓縮

     

相關文章
相關標籤/搜索