webpack-5-代码分割

官网地址：webpack官网

代码拆分是webpack最引人注目的功能之一。此功能使您可以将代码分成多个捆绑包，然后可以按需或并行加载。它可用于实现较小的捆绑包并控制资源负载优先级，如果正确使用，则会对负载时间产生重大影响。

共有三种通用的代码拆分方法：

1. 入口点：使用entry配置手动拆分代码。
2. 防止重复：使用SplitChunksPlugin重复数据删除和拆分块。
3. 动态导入：通过模块内的内联函数调用拆分代码。

1. entry（入口点）

webpack.config.js

const path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
   another: './src/another-module.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

entry里面配置的会在dist里面生成相应的.js文件，但是存在以下缺陷

1. 如果有重复使用的模块，则它们将同时包含在多个地方（使用他们的地方，例：index.js和another.js都使用了lodash，那么打包后，在dist文件夹下的index.js和another.js就都有lodash）。
2. 它不那么灵活，不能用于通过核心应用程序逻辑动态拆分代码。

2. SplitChunksPlugin

使用这个就可以将重复使用的模块拆分出来
webpack.config.js

const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        another: './src/another.js'
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname,'dist'),
    },
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    }
};

添加了optimization这个之后，重新编译后，正常的话dist里面会多出公共的js，index.js和another.js会变小。optimization配置项详情地址：SplitChunks插件

使用官网的 dependOn 发现报错了，entry.[index]的值应该是一个数组或者是字符串。我想也许是因为更新为5.0后去掉了之前的用法吧。所以我就不用这个了，直接使用splitChunks

3. 动态导入

src/index.js

function getComponent() {

    return import('lodash').then(({default: _}) => {
        const element = document.createElement('div');

        element.innerHTML = _.join(['hello','webpack'], "-");

        return element;
    }).catch(err => 'An err');
}

getComponent().then(component => {
    document.body.appendChild(component);
});

还可以写成

async function getComponent() {

    const element = document.createElement('div');
    const {default: _} = await import('lodash');

    element.innerHTML = _.join(['hello','webpack'], "-");

    return element;
}

getComponent().then(component => {
    document.body.appendChild(component);
});

和es6的promise是不是很像。

4. 预取，预加载

webpack的import和es6的不同，可以在函数里面使用，当执行a.js时 import 一个模块b，这就是预加载（Preloading modules）。当点击按钮时 import c模块，这就是预取（ Prefetching）