15、webpack代码分离--入口起点方式

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

有三种常用的代码分离方法：

• 入口起点：使用 entry 配置手动地分离代码。
• 防止重复：使用 CommonsChunkPlugin 去重和分离 chunk，但是webpack4.3版本中已经将其移除，所以事先需要通过SplitChunksPlugin方式事先，在后续文章中会做说明。
• 动态导入：通过模块的内联函数调用来分离代码。

这里先来讲解一下入口起点的方式

1、工程目录结构

code-split
|- package.json
|- webpack.config.js
|- /dist
|- /src
  |- index.js
  |- another-module.js
|- /node_modules

2、src\index.js文件

import _ from 'lodash';
function component() {
    var element = document.createElement('div');

    // Lodash, currently included via a script, is required for this line to work
    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
}

document.body.appendChild(component());

3、another-module.js文件

import _ from 'lodash';

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

4、webpack.config.js

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

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

5、package.json

{
  "name": "code-split",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js --display-modules"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.4"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

※ --display-modules 显示所有编译的模块，不用该参数，公用模块的编译会被隐藏

5、编译结果

>> npm run build

> [email protected] build D:\dev\work\webpackwork\code-split
> webpack --config webpack.config.js --display-modules

Hash: 5055a62feab99c4f0812
Version: webpack 4.33.0
Time: 567ms
Built at: 2019-06-12 18:16:00
            Asset       Size  Chunks             Chunk Names
another.bundle.js   70.3 KiB       0  [emitted]  another
  index.bundle.js   70.4 KiB       1  [emitted]  index
       index.html  255 bytes          [emitted]
Entrypoint index = index.bundle.js
Entrypoint another = another.bundle.js
[0] ./node_modules/lodash/lodash.js 527 KiB {0} {1} [built]
[1] (webpack)/buildin/global.js 472 bytes {0} {1} [built]
[2] (webpack)/buildin/module.js 497 bytes {0} {1} [built]
[3] ./src/index.js 357 bytes {1} [built]
[4] ./src/another-module.js 94 bytes {0} [built]

※ 存在的问题

• 如果入口 chunks 之间包含重复的模块，那些重复模块都会被引入到各个 bundle 中。
• 这种方法不够灵活，并且不能将核心应用程序逻辑进行动态拆分代码。

如上：lodash.js 被重复放到了index和another模块中（解决方法将在后续文章介绍，请继续关注！）