記賬項目 - webpack優化

參考

• 學習 Webpack5 之路（優化篇)
• 腦闊疼的webpack按需加載
• Code-Splitting

思考過程

第一步: 查找哪裏這麼大體積

• 當前打包後 3.15M, 下載後3.3M
• 沒有開始source-map, 所以不是這個問題
• 不再引入全部的Icon後, 變爲577k
• 第一件事, 就是考慮如何動態引入Icon
• 無法動態引入, 全部存入cdn, 每次通過Image, src進行引入

第二步: 提取下核心庫

• 我想不明白的是, 及時提取了, 到時候, 不還是得下載, 使用強緩存?
• 那又怎麼解決第一次打開慢的問題

第三部分: lazy實現懶加載組件

• 核心庫提取後, 可以方便後續加載, 現在的問題是找出用戶看到頁面的時候時間花在哪裏
• 現在還是拆分代碼, 發現即使拆分出來基礎庫, 第一次加載的index.js太大了, 佔用了太長時間.
• 解決辦法: 使用webpack 配合 react中的lazy方法

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

• 結果: Scripting時間降低爲321ms.
• 所有的js都已經拆開, 變爲動態加載.

結果

• 圖標全部保存cdn, 使用svg進行展示
• webpack抽取依賴庫代碼, 形成不易變動代碼
• 組件使用懶加載方式, 保持首次js最小初始化
• 學習到: 官方文檔, 包含一切.