記錄一次打包優化

假裝做前端發表於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

相關文章