Webpack 代码分离

代码分离

代码分离是 webpack 中最引人注目的特性之一。

代码分离能把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影提高项目的性能。

代码分离的三种方法：

• 多个入口：配置多个入口（entry），手动分离代码。
• 防止重复：使用 CommonsChunkPlugin 去重、提取公共模块。
• 动态导入：通过模块的内联函数调用来分离代码。

多个入口

配置多个入口是最简单、最直观的分离代码的方式。不过，这种方式手动配置较多，并有一些陷阱，我们将会解决这些问题。

src/index.js 文件，内容如下：

import _ from 'lodash';

function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

document.body.appendChild(component());

新建 src/another-module.js 文件，内容如下：

import _ from 'lodash';

console.log(
  _.join(['Another', 'module', 'loaded!'], ' ')
);

确保 package.json 文件中，存在下面的 npm script 内容：

"dev": "webpack --mode development  --config webpack.config.js"

修改 webpack.config.js 文件，以便配置多个入口（entry）：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js',
        vendor: './src/another-module.js'
    },
    plugins: [
        new HTMLWebpackPlugin({
            title: 'Code Splitting--代码分离'
        }),
        new CleanWebpackPlugin(['dist'])
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

打开终端，切换到项目目录，运行命令：

npm run dev

这将生成如