webpack的code splitting详解

代码分割Code Splitting

通常来讲，我们写项目的时候可以分为两部分，一部分是引用的类库，另一部分是我们写的业务逻辑代码。这两部分打包后会合并到一个js文件中。
这样方式的缺点是：
一、打包生成的main.js可能会很大，首次访问时会慢
二、当页面业务逻辑发生变化时，又要加载全部的内容
解决方式：使用代码分割，将类库的代码打包成一个js文件，将业务逻辑代码打包成一个文件。
这种方式的优点：
一、分为两个js文件，文件体积较小，可以并行加载，提升加载速度
二、当业务逻辑代码发生变化时，只需要加载业务逻辑代码的js文件即可(用户浏览器有缓存)

方式一 手动分割

以lodash类库为例
lodash.js

import _ from 'lodash';
window._ = _;

webpack.config.js

entry: {
    lodash: './src/lodash.js',
    main: './src/index.js'
}

方式二 webpack

npm i -D @babel/plugin-syntax-dynamic-import 用以解析识别import()动态导入语法---并非转换，而是解析识别

在webpack.common.js配置

optimization: {
    splitChunks: { // 默认配置即可 代码分割
        chunks: 'all',
    }
}

在.babelrc 中配置

"plugins": ["@babel/plugin-syntax-dynamic-import"]

index.js文件

const lodash = () => import(/* webpackChunkName:"test" */'lodash');

 打包后生成的文件名称：vendors~test.js

若配置成以下形式，生成文件变成test.js

splitChunks: { // 默认配置即可 代码分割
    chunks: 'all',
    cacheGroups: { // 缓存组
        vendors: false,
        default: false,
    }
}

 splitChunks详细配置

optimization: {
    splitChunks: { // 默认配置
        chunks: "all", // async只对异步代码生效 all同步异步都分割 initial同步需配合cacheGroups
        minSize: 30000, // >30kb就做代码分割
        minChunks: 1, // 当一个模块用了多少次才进行代码分割
        maxAsyncRequests: 5, // 同时加载的模块数
        maxInitialRequests: 3, // 入口文件的代码分割个数
        automaticNameDelimiter: '~', // 组合文件连接的连接符
        name: true, // 让cacheGroups里的名字有效
        cacheGroups: { // 缓存组
            vendors: { // 如果代码是node_modules里的则打包成vendors.js
                test: /[\\/]node_modules[\\/]/,
                priority: -10, // 优先级
                filename: 'vendors.js' // 若不配置,生成的文件名以vendors+~+ertry里配置的name 
            },
            default: {
                // minChunks: 2,
                priority: -20,
                reuseExistingChunk: true, // 如果一个模块被打包过直接复用
                fileName: 'common.js'
            }
        }
    }
},