【隨心秀】優化1M帶寬的雲服務器訪問速度

時間 2019-11-07

標籤隨心秀優化 1m 帶寬服務器訪問速度简体版

原文原文鏈接

一臺1M帶寬的雲服務器, 理論下載最大速度是128kb/s
現現在，前端項目構建後的文件動輒就是幾M大小，那用戶來訪問豈不是須要10s以上
天吶，哪會有用戶這麼好心的等你這麼久，早就溜了
那麼如何優化訪問速度吶，且聽我細細道來先體驗優化後的服務器（3s左右打開）css

先對比下優化先後的首頁訪問速度
左邊是優化前訪問速度（已經超過20s）
右邊是優化後的訪問速度（奇蹟般的能到2s）

解決方案

擴容

擴容？這輩子都不會擴容html

優化構建

要突破1M帶寬的限制，首先想到的是把構建包的體積降下來，其次是減小首屏加載的資源，再者能夠經過CDN加速靜態資源訪問前端

1.如何減少構建包體積

項目中使用不少第三方庫（react、react-router、antd等等），把這些庫提取出來就能夠減小構建包的體積
webpack中的externals配置能夠在打包時忽略這些第三方包，這樣就有效減小包體積react

// webpack.config.js
module.exports = {
  // 經過externals配置，將react、react-dom、react-router、antd設置爲打包時不參與構建
  externals: {
    // 左邊key表示在import導入時的包名
    // 右邊的值表示外部引入導出的變量名-這個要寫正確了
    react: 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter',
    antd: 'antd',
  }
};
複製代碼

那這些被導出的包該如何引用吶
在html文件中，使用script標籤引入這些包就行webpack

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" href="bound.css">
        <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/antd/3.16.3/antd.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/react/16.8.6/umd/react.production.min.js"></script>
        <script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
        <script src="https://cdn.bootcss.com/react-router/3.2.1/ReactRouter.min.js"></script>
        <script src="https://cdn.bootcss.com/antd/3.16.3/antd.min.js"></script>
    <head>
</html>
複製代碼

注意到上面的html模板中引用animate.min.css和antd.min.css
不止js有第三方包，css也有，那css也可使用externals導出嗎？
答案是：不能！ 那這些第三方css庫如何處理吶？
別慌，在使用antd，官方說使用babel-plugin-import這個插件能夠達到按需加載的效果，例如若只使用Button這個組件，能夠只引入Button相關的js代碼和css代碼，這樣能夠減小構建後文件大小
參考下這種按需加載的導入方式，來看下babel-plugin-import如何使用git

// 這個插件的原理是找到libraryName對應的包名導入，將這一行代碼重寫一下 
// 例如：import 'animate.css' 會被轉換成 import './empty.css'
// 將三方包指向一個空的css文件，那打包的後會打包這個空的css文件，也就不會增長包的體積

// .babelrc.js
module.exports = {
    plugins: [
        [
          'import',
          {
            libraryName: 'animate.css',
            customName: name => './empty.css',
          },
          'animate.css',
        ],
        [
          'import',
          {
            libraryName: 'antd/dist/antd.less',
            customName: name => './empty.css',
          },
          'antd/dist/antd.less',
        ],
    ],
}
複製代碼

2.如何減小首屏加載資源

減小首屏加載資源，就是把首屏不須要的資源延遲加載，以達到優化加載速度的目的。
一個站點可能會有多個路由，那麼除了當前路由相關的資源須要加載，其餘的路由的內容都應該被懶加載。
React提供了React.lazy方法來懶加載組件，React.lazy必需要被包裹在React.Suspense標籤裏。
要使用懶加載須要結合動態import()這個語法，使用babel的plugin-syntax-dynamic-import這個插件能夠支持這個語法。github

// 動態加載組件的一個寫法
// 在路由引用一個組件時，使用這種方式把須要引用的組件包裹一下
/* loadable.js */
import React from 'react';
const Comp = React.lazy(() => import(/* webpackChunkName: 'preview' */ './index.js'));
export default () => <React.Suspense><Comp /></React.Suspense>; 複製代碼