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

冷不防 2022-01-15 11:05 240阅读 0赞

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

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

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

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

1、工程目录结构

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

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
    
    > code-split@1.0.0 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模块中（解决方法将在后续文章介绍，请继续关注！）