Webpack：js代码分割code splitting（11）

介绍

当一个js文件因为业务问题变得很大，使用lodash可以对代码进行分割，并发请求可以减少加载时间，和用户重新加载文件的大小。

每个Chunk就是一个分割下来的js文件。

手动分割

为公共的文件多创建几一个入口，打包的时候代码就会分开打包。

module.exports = {
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin()
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
};

自动代码分割

webpack.common.js的配置

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin()
    ],
    optimization:{ //使用代码自动分割
        splitChunks:{
            chunks:'all'
        }
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
};

被引用的lodash js库会和业务代码放在两个不同的js文件中：vendors~ main.js和main.js，vendors~main.js是lodash库，mian.js是业务代码。

import _ from 'lodash'

console.log(_.join(['a','b','1d'],'***'))
console.log(_.join(['a','b','c'],'***'))

如果使用动态引入js，则不需要配置webpack.common.js文件，自动会做代码分割。

function getComponent() {
  	// 动态引入
    return import(' lodash').then(({ default: _ }) => {
        var element = document.createElement('div');
        element.innerHTML = _.join(['DelL','Lee'],'-' )
    return element;
    })
}
getComponent().then(element => {
    document.body.appendChild(element);
});

使用以上代码需要安装
npm install babel-plugin-dynamic-import-webpack -D

详细配置

增加动态代码引入的支持
npm install --save-dev @babel/plugin-syntax-dynamic-import

在.babelrc文件加入下面配置

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

为动态import的包进行命名

function getComponent() {
    return import( /* webpackChunkName:"lodash" */ 'lodash').then(({ default: _ }) => {
        var element = document.createElement('div');
        element.innerHTML = _.join(['DelL','Lee'],'-' )
    return element;
    })
}
getComponent().then(element => {
    document.body.appendChild(element);
});

webpack.common.js详细配置的说明

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin()
    ],
    optimization: {
        splitChunks: { //代码分割配置
            //分割代码类型，async：异步引入的代码才分。all：所有代码都分割。initial：只分割同步引入的代码
            chunks: "initial",
            //大于3万字节的包才会进行分割
            minSize: 30000,
            //大于5万字节（50kb）的会进行二次分割
            maxSize: 50000,
            //至少引入了多少次才进行分割
            minChunks: 1,
            //打包的前5个库进行代码分割，超过5个不再做分割
            maxAsyncRequests: 5,
            //整个网站首页最多做3次代码分割，超过后不做分割
            maxInitialRequests: 3,
            //文件名之间的连接符
            automaticNameDelimiter: '~',
            //让cacheGroups里的name为有效的
            name: true,
            cacheGroups: {//对满足上面条件的包先缓存起来，如果也符合下面条件，就一起打包
                vendors: {
                    // 只对node_modules进行打包，放入vendors组里
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: { //cacheGroups里所有默认的打包规则
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true //文件以前被打包过就复用，不重新打包
                }
            }
        }
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
};