在前面的學習中，可以發現，js代碼都打包成了一個文件。

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

代碼分割方法一：通過入口文件進行代碼分割

項目里面有兩個js文件（index.js，test.js），可以通過設置entry實現多個入口，從而打包生成多個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',
        // 輸出文件路徑-寫路徑是要寫絕對路徑
        // __dirname是nodejs的變量，代表當前文件的目錄絕對路徑，在這里當前文件指的就是webpack.config.js
        // 第二個參數，當前路徑下的哪個文件中，這里指的就是打包后的資源輸出到當前路徑下的build文件夾中
        //連上上面的filename，就是打包資源輸出到當前文件路徑下的build文件夾中的built.js文件中
        path: resolve(__dirname, 'build')
    },

執行webpakc命令

可以看到打包生成了兩個js文件。

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

代碼分割方法二：通過splitChunks屬性進行代碼分割

單入口分析

不配置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執行了')

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

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

console.log(add(1, 3))

console.log($)

?執行webpack命令：

?在webpack.config.js中配置splitChunks

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

重新執行webpack?

?

?可以看到代碼進行了分割。

splitChunks可以將node_modules中的代碼單獨打包成一個chunk輸出

多入口分析

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

import $ from 'jquery'

console.log($)

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

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

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

不配置splitChunks

執行webpack命令

從打包后的文件大小可以看出，當多個入口都引入同一個庫文件時，每個入口都會將庫文件打包進去，這很不友好，如果整個項目只打包一次才是我們想要的。

?在webpack.config.js中配置splitChunks

設置了splitChunks之后，再重新運行webpack命令

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

所以，splitChunks 會自動分析多個入口chunk中，有沒有公共的文件，如果有則會打包成單獨的一個chunk，而不會重復加載?

代碼分割方法三：通過js代碼進行代碼分割

將配置修改為單入口，這樣雖然設置了splitChunks，但是也只會將node_modules中文件單獨打包。

在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執行了')

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

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

console.log(add(1, 3))

console.log($)

執行webpack：

可以看到只打包了jquery庫文件和index.js文件，test.js并沒有單獨打包。我們希望能將test文件也單獨打包，該怎么處理呢？可以通過js代碼，讓某個文件單獨打包成一個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動態倒入語法，能將某個文件單獨打包

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

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

// 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加載失敗')
})

?可以看到重新運行后的test.js的輸出文件名已經是我們指定的路。