webpack4.0讓編譯速度飆升

前端開發一個crm項目的時候，由於項目內容比較龐大，致使webpack編譯和打包都巨慢，實在是影響開發效率，因此着手升級webpack。

webpack4-es6-react

webpack4-es6-react是一個全新的基於webpack四、react1六、es六、antd-mobile的前端架構實現方案，默認是antd-mobile,也能夠自定義配置ui框架如：antd

功能

• 編譯速度快（使用happypack插件實現多線程執行任務）
• 按需加載（不一樣頁面文件單獨壓縮）
• hash指紋（js、css文件自動添加版本號）
• es2015
• 支持less、stylus
• 圖片體積小支持base64壓縮
• 支持svg解析
• 支持自定義打包文件的目錄
• 支持熱更新
• 支持打包輸出map文件
• 支持打包壓縮文件

使用版本

• webpack 4.7.0
• react 16.4.0
• react-dom 16.4.0

目錄結構

.
├── webpack.config  --------------------- webpack相關配置
├── package.json  --------------------- 項目配置
├── README.md  ------------------------ 說明文件
└── src  ------------------------------ 源碼目錄
    ├── index  -------------------------- 入口文件
    ├── index.html  -------------------------- html入口文件
    ├── components  ------------------- 業務模塊集合目錄
    ├── images  ----------------------- 圖片資源目錄
    └── pages  ------------------------ 頁面集合目錄
        └── App  --------------------- 某一個頁面
            ├── App.js  ------------- 頁面入口文件
            └── App.css  -------- 頁面樣式

克隆

git clone https://github.com/NewPrototype/webpack4-es6-react.git

安裝依賴

npm install

編譯

npm run start （開發模式）

默認瀏覽器會自動打開 http://localhost:9999，編譯完成

打包

npm run build （生產模式）

package.json

package.json- script 參數解析

• --open 打開瀏覽器
• --color webpack輸出信息顏色
• --hot 熱更新
• --inline 熱更新的方式
• --mode development（開發模式） || production (生產模式)
• --profile webpack 運行信息

webpack.config.js

const { argv } = process;
let env = 'development'; //默認是開發模式
argv.forEach(v => {
  if (v == 'production') {
    env = 'production';
  }
});

開發模式

• 無需map文件
• 無需壓縮css,js
• 啓動多線程執行編譯任務

生產模式

• 生成map
• 壓縮文件
• 自動添加hash版本號（解決緩存問題）

速度

• 編譯從76460ms提高到14830ms

  Hash: 7e97185183a8397d60dc
  Version: webpack 4.12.0
  Time: 14830ms
  Built at: 2018-06-11 11:20:01

• 熱更新速度從2.5秒到1秒左右

  Hash: df56e41b7815ca326b9e
  Version: webpack 4.12.0
  Time: 758ms
  Built at: 2018-06-12 15:27:47

todoList

• 按需加載路由
• 輸出 webpack編譯json,分析編譯時間
• 支持多入口
• react-redux一鍵生成模版
• 支持axios
• 提升webpack編譯速度（一直在持續...）

gitHub

https://github.com/NewPrototy...