Webpack系列——代码分离(Code Splitting)

代码分离(Code Splitting)

// index.js
import _ from 'lodash';
const ele = document.createElement('div');
ele.innerHTML = _.join(['Code', 'Splitting'], '---');
document.body.appendChild(ele);

以上代码中，在开头同步引入了 lodash ，这没什么问题，但是一旦这个 index.js 文件很大，只要 index.js 中代码一变化，那么整个 index.js 就会重新加载，这是，lodash 又会被重新引入。简而言之，每次修改 index.js ，就会导致一次 lodash 的引入，这是一种浪费。

Entry 入口配置

将固定复用的代码（以 lodash 为例）卸载一个 js 文件中，然后放在 entry 入口配置里。

注意：lodash 和 index 的先后顺序

// lodash.js
import _ from 'lodash'
window._ = _
​
​
// index.js (主文件)
const ele = document.createElement('div')
ele.innerHTML = _.join(['Code', 'Splitting'], '---')
document.body.appendChild(ele)

webpack.config.js

const path = require('path')
module.exports = {
    mode: 'development',
    entry: {
        lodash: './src/lodash.js', // 注意顺序，lodash 写在前面
        index: './src/index.js' // 这样 index.js 的代码才能用到 lodash
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
    ...
}

这样，main.js 就被拆分为 lodash.js 和 index.js。