記錄一次打包優化

假裝做前端發表於2018-09-21
優化

webpack本地開發時，經常會出現開發著然後打包速度很慢的情況。酒店現在有大約59個頁面，這些頁面都進行了惰性載入，但是現在每個chunk打包出來的包很大下面進行優化：

優化前先分析打包後的檔案
image

可以看見每個chunk都很大 有些快達到了1M。

使用webpack-bundle-analyzer分析輸出檔案，如下圖：

image

可以看出lodash被打包了很多次，導致載入lodash的chunk很大。

下面編輯其中某一個chunk，並且儲存，如下圖

image

重新打包時間達到了2.592s，其中起始檔案index.0a8ac.js達到了841kb,下面先優化各個lodash被載入很多次的問題。

lodash等公共包優化

加入webpack 非同步公共打包配置

new webpack.optimize.CommonsChunkPlugin({ 
     name: 'index',      // the name or list of names must match the name or names      // of the entry points that create the async chunks          children: true,      // (use all children of the chunk)          async: true,      // (create an async commons chunk)          minChunks: 3,      // 必須至少3個chunk裡面包含該檔案才進行公共打包 (3 children must share the module before it's separated)    
  }),複製程式碼

下面再來看：

打包後的檔案目錄大小

image

可以看見減少了很多，此時編輯重新打包發現大概只有1094ms，已經少了很多，但是每次打包

出來的index.hash.js還是很大，體積並沒有減少。先看看結構

image

可以看見moments佔用了很大體積，但是明明moment已經被抽離為了公共包進行打包，如下：

window.__REACT_LIB={ 
   React:React,    ReactDOM:ReactDOM,    ReactRouter:ReactRouter,    antd:antd,    moment:moment,    backbone
  };
複製程式碼

為什麼還會打包？該index檔案是由入口檔案包含路由 reducers等以router進行分塊之前的程式碼，故現在從app.js去查詢，發現如下程式碼：

import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
雖然webpack打包配置裡面有下面的externals:{ 
   'react':'window.__REACT_LIB.React',    'react-dom':'window.__REACT_LIB.ReactDOM',    'react-router':'window.__REACT_LIB.ReactRouter',    'antd':'window.__REACT_LIB.antd',    'backbone':'window.__REACT_LIB.backbone',    'moment':'window.__REACT_LIB.moment',  
  },複製程式碼

但是因為import 'moment/locale/zh-cn';
這行，moment又被重新打包了，現在去掉這行後。現在看打包進度。

image

index檔案直接從814降到了276kb。優化完成 看打包檔案：

image

編輯單個chunk後的過載

image

現在chunk裡面還包含有jquery.js，這是因為minChunk:3設為3的緣故，業務裡面因為使用到了一個jqeury.fancyTree.js，該模組會去載入jquery.js

所以會這樣.現在去優化，加入，這樣載入時便會之前去查詢window.$變數。

'jquery':'window.$',，現在，整個優化完成。

image

來源：https://juejin.im/post/5ba4f2266fb9a05d28734815

相關文章