在前面的學(xué)習(xí)中，可以發(fā)現(xiàn)，js代碼都打包成了一個(gè)文件。

?這樣使得js文件很大，影響加載速度，我們希望能將文件進(jìn)行分割，這樣可以實(shí)現(xiàn)多個(gè)文件并行加載，速度更快，另外代碼分割之后還可以實(shí)現(xiàn)按需加載等功能。

代碼分割方法一：通過入口文件進(jìn)行代碼分割

項(xiàng)目里面有兩個(gè)js文件（index.js，test.js），可以通過設(shè)置entry實(shí)現(xiàn)多個(gè)入口，從而打包生成多個(gè)js文件。

    // 單入口
    // entry:'./src/js/index.js',
    // 多入口
    entry:{
        main:'./src/js/index.js',
        test:'./src/js/test.js'
    },

output修改輸出文件名filename:'js/[name].[contenthash:10].js',

    output: {
        // 輸出文件名
        // filename: 'built.js',
        // [name]:取entry中的文件名，如果entry中是main，則輸出就是main，如果是test輸出就是test
        filename:'js/[name].[contenthash:10].js',
        // 輸出文件路徑-寫路徑是要寫絕對(duì)路徑
        // __dirname是nodejs的變量，代表當(dāng)前文件的目錄絕對(duì)路徑，在這里當(dāng)前文件指的就是webpack.config.js
        // 第二個(gè)參數(shù)，當(dāng)前路徑下的哪個(gè)文件中，這里指的就是打包后的資源輸出到當(dāng)前路徑下的build文件夾中
        //連上上面的filename，就是打包資源輸出到當(dāng)前文件路徑下的build文件夾中的built.js文件中
        path: resolve(__dirname, 'build')
    },

執(zhí)行webpakc命令

可以看到打包生成了兩個(gè)js文件。

但是這種方法有一點(diǎn)缺點(diǎn)：如果js文件名修改，或者js文件增加或者減少時(shí)，都需要修改配置很不方便。?

代碼分割方法二：通過splitChunks屬性進(jìn)行代碼分割

單入口分析

不配置splitChunks

將入口文件還原為單入口，然后在index.js中引入jquery，

import '../css/style1.css'
import '../css/style2.less'
// import { test, test2, test3 } from './test.js'
import $ from 'jquery'

console.log('index.js執(zhí)行了')

// test()
// test2([1, 2, 3])

function add(a, b) {
    return a + b;
}

console.log(add(1, 3))

console.log($)

?執(zhí)行webpack命令：

?在webpack.config.js中配置splitChunks

    optimization:{
        splitChunks:{
            chunks:'all'
        }
    },

重新執(zhí)行webpack?

?

?可以看到代碼進(jìn)行了分割。

splitChunks可以將node_modules中的代碼單獨(dú)打包成一個(gè)chunk輸出

多入口分析

代碼設(shè)置成多入口，并且在test中也引入jquery

import $ from 'jquery'

console.log($)

console.log('test.js執(zhí)行了')

export function test() {
    const value = 'hello world'
    console.log('test value: ', value)
}

export function test2(arr) {
    if (!arr || arr.length <= 0) {
        console.log('test2 傳參錯(cuò)誤')
        return
    }
    const result = arr.reduce((sum, current) => sum += current, 0)
    console.log('test2  result: ', result)
}
export function test3(a, b) {
    console.log('test3 執(zhí)行力')
    return a + b
}

不配置splitChunks

執(zhí)行webpack命令

從打包后的文件大小可以看出，當(dāng)多個(gè)入口都引入同一個(gè)庫文件時(shí)，每個(gè)入口都會(huì)將庫文件打包進(jìn)去，這很不友好，如果整個(gè)項(xiàng)目只打包一次才是我們想要的。

?在webpack.config.js中配置splitChunks

設(shè)置了splitChunks之后，再重新運(yùn)行webpack命令

從打包輸出文件可以明顯看出jquery文件只打包了一次，并且輸出了3個(gè)文件（一個(gè)node_modules庫文件，兩個(gè)入口文件）。這樣項(xiàng)目的輸出文件就減小了很多。

所以，splitChunks 會(huì)自動(dòng)分析多個(gè)入口chunk中，有沒有公共的文件，如果有則會(huì)打包成單獨(dú)的一個(gè)chunk，而不會(huì)重復(fù)加載?

代碼分割方法三：通過js代碼進(jìn)行代碼分割

將配置修改為單入口，這樣雖然設(shè)置了splitChunks，但是也只會(huì)將node_modules中文件單獨(dú)打包。

在index.js中引入test.js文件

import '../css/style1.css'
import '../css/style2.less'
import { test, test2, test3 } from './test.js'
import $ from 'jquery'

console.log('index.js執(zhí)行了')

test()
test2([1, 2, 3])

function add(a, b) {
    return a + b;
}

console.log(add(1, 3))

console.log($)

執(zhí)行webpack：

可以看到只打包了jquery庫文件和index.js文件，test.js并沒有單獨(dú)打包。我們希望能將test文件也單獨(dú)打包，該怎么處理呢？可以通過js代碼，讓某個(gè)文件單獨(dú)打包成一個(gè)chunk

修改test.js的引入方式

// import { test, test2, test3 } from './test.js'

import('./test').then((result) => {
    console.log('test.js加載成功')
    console.log('result:', result)
}).catch(() => {
    console.log('test.js加載失敗')
})

?輸出result中是es6的module，在module中有test.js中的方法，如果需要使用test.js中的方法，就需要直接傳入方法

// import { test, test2, test3 } from './test.js'

import('./test').then(({ test, test2 }) => {
    console.log('test.js加載成功')
    // console.log('result:', result)
    test()
    test2([1, 2, 3])
}).catch(() => {
    console.log('test.js加載失敗')
})

這種方法就是通過import動(dòng)態(tài)倒入語法，能將某個(gè)文件單獨(dú)打包

但是，從打包的輸出文件可以看出輸出的名字不是我們想要的。我們希望能夠指定文件名。

可以通過webpackChunkName來設(shè)置打包輸出的文件名

// import { test, test2, test3 } from './test.js'

import(/*webpackChunkName:'test'*/'./test').then(({ test, test2 }) => {
    console.log('test.js加載成功')
    // console.log('result:', result)
    test()
    test2([1, 2, 3])
}).catch(() => {
    console.log('test.js加載失敗')
})

?可以看到重新運(yùn)行后的test.js的輸出文件名已經(jīng)是我們指定的路。