webapck4 玄妙的 SplitChunks Plugin

我就什麼話也不說發表於2018-12-06
WebPlugin

webpack 4捨棄了之前的commonChunkPlugin，增加了SplitChunksPlugin, 對於這個外掛，它的option 選項有initial、async、all三個值。我想大多數剛學習webpack 4 的同學應該都不能很好的理解這幾個值的區別，到底每個選項值是啥意思，我們來手把手實踐一下。

原文連結：Webpack 4 — Mysterious SplitChunks Plugin

幾點說明：

  • 這篇文章是看了上面這篇洋文文章之後進行的一次實踐
  • 動手後發現和原文中的結果並不完全一樣，估計是原文中沒有寫name欄位的緣故。

官方文件

我們做一個粗略的嘗試，思路是有兩個a.js和b.js兩個入口檔案，引入相同的模組，區別是一些模組是動態引入的，以此來摸索一下Code-Spliting。

開始之前

墜重要的當然是配置一下webpack環境

  • 初始化
mkdir splitTest
cd splitTest
npm init -y
複製程式碼
  • 安裝依賴
npm i react jquery loadsh -S

npm i webpack webpack-bundle-analyzer webpack-cli @babel/core @babel/plugin-syntax-dynamic-import -D
複製程式碼
  • webpack配置

webpack.config.js

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
    mode: 'production',
    entry: {
        a: './src/a.js',
        b: './src/b.js'
    },
    output: {
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new BundleAnalyzerPlugin()
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /node_modules/,
                    name: 'vendors', // 這個欄位不寫結果會不一樣，可以嘗試一下，我目前沒整明白，求大佬解答
                    chunks: 'initial',
                }
            }
        }
    }
}

複製程式碼

package.json

"scripts": {
    "build": "webpack --config webpack.config.js"
}
複製程式碼

.babelrc

{
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}
複製程式碼
  • a.js
import 'react';
import 'jquery';
import ('lodash');

console.log('I am angry!');
var a = 10;

export default a;


複製程式碼
  • b.js
import ('react');
import ('lodash');
import 'jquery';

console.log('I am Exciting!');
var b = 10;

export default b;
複製程式碼

採用控制變數法，我們來試驗當存在公共庫的時候，webpack是怎麼處理的

  • 1 一個動態引入，另個一不 (React)
  • 2 兩個都不動態載入 (JQuery)
  • 3 兩個都動態載入 (lodash)

畫了個比較挫的圖，大概描述一下

webapck4 玄妙的 SplitChunks Plugin

準備工作都弄好了

chunks: 'initial'

...
vendor: {
    test: /node_modules/,
    chunks: 'initial',
    priority: 1,
}
...
複製程式碼

webapck4 玄妙的 SplitChunks Plugin

從圖中我們可以看出：

  • 1 JQuery和react被打到vendors.bundle.js裡，被a.js和b.js共享，由於react在a.js中不是動態載入的，所以也被打進去了
  • 2 lodash被打到1.bundle.js中 因為這是兩個檔案共有的動態模組
  • 3 b.js中的react被打到4.bundle.js中

chunks: 'async'

webapck4 玄妙的 SplitChunks Plugin

看看發生了什麼：

  • webpack從b.js中抽離了react，扔到一個新檔案，a.js中的react 不動。這個優化只會作用到動態模組，import('react')宣告會產生獨立的檔案，import 'react'則不會
  • a.js和b.js共有的動態模組lodash被移動到一個新檔案。
  • 沒有JQuery進行優化，儘管a.js和b.js都引用了

相當於告訴webpack，我打包的時候只關心動態載入的模組，其他的你隨便玩。

chunks: 'all'

webapck4 玄妙的 SplitChunks Plugin

所有模組都被扔到了vendors.bundle.js裡面。

相關文章