webpack之代码分离

webpack 代码分离之静态导入

想要代码分离可以通过配置多个入口文件

1. 例子(但是下面的这个方法的缺点是：无法共用重复的模块，会导致打包过后的包很大)

// webpack.config.js
   module.exports = {
       entry: {
           index: './src/index.js',
           another: './src/another-module.js',
       },
       output: {
           filename: '[name].bundle.js'
       }
   }
1
2
3
4
5
6
7
8
9
10

2. 另外一个方法（可以重用共同的模块包，但是共同的包要自己去写）

 // webpack.config.js  （执行编译配置之后，会生成三个文件：index.js, another.js, shared.js。需要将这三个文件都引入html中才会生效）
    module.exports = {
        entry: {
            index: {
                import: './src/a.js',
                dependOn: 'shared',
            },
            another: {
                import: './src/b.js',
                dependOn: 'shared'
            },
            shared: 'lodash',                       // lodash 是 a 和 b 中导入的共同的包
        },
        output: {
            filename: '[name].bundle.js'
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. 最后一个方法就比较智能了（无需手动的去输入共同包的名字，只需要在webpack.config.js中配置一个配置项就可以自动寻找有哪些包是共同的）

 // webpack.config.js  （执行编译配置之后，会生成三个文件：index.js, another.js, .jvendors-node_modules_lodash.js。需要将这三个文件都引入html中才会生效）
    module.exports = {
        optimization: {
            splitChunks: {
                chunks: 'all'
            }
        }
    }
1
2
3
4
5
6
7
8

webpack 代码分离之动态导入

动态导入的核心是：使用import()函数，import()函数内的那个模块会被单独导出一个js文件，导出效果与上面的最后一个方法一样

// a.js 文件
    function getComponent() {
        return import('lolash').then(({default: _}) => {
            const element = document.createElement('div');
            element.innerHTML = _.join(['Hello', 'webpack'], ' ');
            return element;
        })
    };
    getComponent().then((element) => {
        document.body.appendChild(element);
    })

// index.js 文件(webpack打包的入口文件)
import './a.js'
1
2
3
4
5
6
7
8
9
10
11
12
13
14

动态导入的应用场景：我们可以当某件事情触发的时候再使用动态导入的方式加载某个包，实现按需加载（懒加载）。

动态导入的一些配置,webpackChunkName：动态导入生成的单独的文件的文件名字，webpackPrefetch：预获取，会在页面加载完毕，在网络有空闲的时候就加载该包（会在head标签内生成一个link标签，具体了解请自行百度），webpackPreload：和懒加载方式效果一致，不过它可以进行并行下载。

// a.js 文件
    function getComponent() {
        return import(/* webpackChunkName: 'lolash', webpackPrefetch: true */'lolash').then(({default: _}) => {
            const element = document.createElement('div');
            element.innerHTML = _.join(['Hello', 'webpack'], ' ');
            return element;
        })
    };
    getComponent().then((element) => {
        document.body.appendChild(element);
    })

// index.js 文件(webpack打包的入口文件)
import './a.js'
1
2
3
4
5
6
7
8
9
10
11
12
13
14

静态导入和动态导入同时存在的配置

如果静态导入和动态导入同时存在，那么就需要按照静态导入的最后一种方法进行配置，才会把静态导入和动态导入所导入的公共包单独导出成为一个文件，如果不进行配置，那么公共包将不会导出为一个公共的js文件