1.说明

code split：代码分割。
因为webpack打包了入口文件之后，所有的代码都变成了一个大的js文件。
但是代码初次打开的时候其实不需要加载这么大的东西，所以我们要在只需要加载需要加载的文件。

模式：

  1. 单入口文件就输出单个文件，多入口就有几个入口就输出几个文件。
  2. 添加splitChunks
    1. 单入口就会将node_modules中的代码打包成一个chunk最终输出。
    2. 多入口文件除了会打包node_modules外，还会分析入口之间重复的依赖也会单独打包成一个chunk。
  3. 单入口打包多个chunk时，需要使用import方法和填写splitChunks完成。

2.案例

2.1.未分割

2.1.1.index.html

src\index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. </body>
  10. </html>

2.1.2.test.js

src\js\test.js

  1. import $ from 'jquery'
  3. console.log($)
  5. export function mul(x, y) {
  6.     return x - y
  7. }

2.1.3.index.js

src\js\index.js

  1. import { mul } from "./test"
  2. import $ from 'jquery'
  4. function sum(...args) {
  5.     return args.reduce((p, c) => p + c, 0);
  6. }
  8. console.log($)
  9. console.log(mul(5, 9))
  10. console.log(sum(1, 2, 3, 4))

2.1.4.webpack.config.js

webpack.config.js

  1. const { resolve } = require('path')
  2. const HtmlWebpackPlugin = require("html-webpack-plugin");
  4. module.exports = {
  5.     mode: 'production',
  6.     devtool: 'source-map',
  7.     entry: './src/js/index.js',
  8.     output: {
  9.         filename: 'js/built.[contenthash:10].js',
  10.         path: resolve(__dirname, 'build')
  11.     },
  12.     plugins: [
  13.         new HtmlWebpackPlugin({
  14.             // 模板位置
  15.             template: './src/index.html',
  16.             minify: {
  17.                 collapseWhitespace: true,
  18.                 removeComments: true,
  19.             }
  20.         })
  21.     ],
  22. }

2.1.5.打包测试

只编译了一个built.56e825e85a.js文件。

  1. E:\Code\learn\webpack\a15code_split>webpack
  2. asset js/built.56e825e85a.js 88.5 KiB [emitted] [immutable] [minimized] (name: main) 2 related assets
  3. asset index.html 166 bytes [emitted]
  4. runtime modules 718 bytes 3 modules
  5. orphan modules 92 bytes [orphan] 1 module
  6. cacheable modules 282 KiB
  7.   ./src/js/index.js + 1 modules 291 bytes [built] [code generated]
  8.   ../node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
  9. webpack 5.53.0 compiled successfully in 2081 ms

2.2.多入口打包

2.2.1.webpack.config.js

webpack.config.js

// ...
module.exports = {
    // ...
    // entry: './src/js/index.js',
    entry: {
        main: './src/js/index.js',
        test: './src/js/test.js'
    },
    output: {
        // filename: 'js/built.[contenthash:10].js',
        filename: 'js/[name].[contenthash:10].js',
        path: resolve(__dirname, 'build')
    },
    // ...
}

2.2.3.打包测试

编译了两个文件main.84c961676f.js、test.dc1159639c.js。

E:\Code\learn\webpack\a15code_split>webpack
asset js/main.84c961676f.js 88.6 KiB [emitted] [immutable] [minimized] (name: main) 2 related assets
asset js/test.dc1159639c.js 88.4 KiB [emitted] [immutable] [minimized] (name: test) 2 related assets
asset index.html 224 bytes [emitted]
runtime modules 1.4 KiB 6 modules
cacheable modules 282 KiB
  ./src/js/index.js 199 bytes [built] [code generated]
  ./src/js/test.js 92 bytes [built] [code generated]
  ../node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
webpack 5.53.0 compiled successfully in 2176 ms

2.3.splitChunks

2.3.1.webpack.config.js

webpack.config.js

// ...

module.exports = {
    // ...
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
}

2.3.2.打包测试

打包了三个文件。

E:\Code\learn\webpack\a15code_split>webpack
asset js/638.dbc3bc96a6.js 87.9 KiB [emitted] [immutable] [minimized] (id hint: vendors) 2 related assets
asset js/main.7bd5bd330b.js 1.57 KiB [emitted] [immutable] [minimized] (name: main) 1 related asset
asset js/test.e79eadb4f8.js 1.37 KiB [emitted] [immutable] [minimized] (name: test) 1 related asset
asset index.html 282 bytes [emitted]
Entrypoint main 89.5 KiB (460 KiB) = js/638.dbc3bc96a6.js 87.9 KiB js/main.7bd5bd330b.js 1.57 KiB 2 auxiliary assets
Entrypoint test 89.3 KiB (460 KiB) = js/638.dbc3bc96a6.js 87.9 KiB js/test.e79eadb4f8.js 1.37 KiB 2 auxiliary assets
runtime modules 6.41 KiB 10 modules
cacheable modules 282 KiB
  ./src/js/index.js 199 bytes [built] [code generated]
  ./src/js/test.js 92 bytes [built] [code generated]
  ../node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
webpack 5.53.0 compiled successfully in 1884 ms

2.4.import使用

2.4.1.index.js

src\js\index.js

import $ from 'jquery'

console.log($)

function sum(...args) {
    return args.reduce((p, c) => p + c, 0);
}

console.log(sum(1, 2, 3, 4))

import(/* webpackChunkName: "testRename" */"./test")
    .then(({ mul }) => {
        console.log(mul(5, 9))
    })
    .catch(() => {
        console.log('文件加载失败')
    })

2.4.2.打包测试

单个入口，打包了三个文件。

E:\Code\learn\webpack\a15code_split>webpack
asset js/638.dbc3bc96a6.js 87.9 KiB [emitted] [immutable] [minimized] (id hint: vendors) 2 related assets
asset js/main.fe78431ba8.js 3.46 KiB [emitted] [immutable] [minimized] (name: main) 1 related asset
asset js/testRename.232d429890.js 249 bytes [emitted] [immutable] [minimized] (name: testRename) 1 related asset
asset index.html 223 bytes [emitted]
Entrypoint main 91.4 KiB (469 KiB) = js/638.dbc3bc96a6.js 87.9 KiB js/main.fe78431ba8.js 3.46 KiB 2 auxiliary assets
runtime modules 8.06 KiB 11 modules
cacheable modules 282 KiB
  ./src/js/index.js 342 bytes [built] [code generated]
  ../node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
  ./src/js/test.js 92 bytes [built] [code generated]
webpack 5.53.0 compiled successfully in 1921 ms