webpack代码分离

webpack代码分离

代码分离：把代码分离到不同的bundle中，以便后续的按需加载或者并行加载。 代码分离有三种方式：

• 1，文件入口entry
• 2,防止重复
• 3,动态导入

entry方式分离：

webpack中配置两个入口：

const path = require('path');

module.exports = {
    entry: {
        index: './src/index.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

复制代码

index.js和print.js中同时引入common模块：

import common from './common';
复制代码

然后使用webpack打包，输出目录下会有两个bundle文件,就达到了代码分离的效果，但是这种方式会有两个问题：

• 1，两个bundle文件都引入了common模块，造成了重复引用。
• 2，不够灵活，不能动态的将核心代码逻辑拆分出来。

防止重复
1，在webpack.config.js中将公共模块显示抽离出来,common是index.js和print.js中引入的公共模块：\

 entry: {
        index: {
            import: './src/index.js',
            dependOn: 'shared'
        },
        print: {
            import: './src/print.js',
            dependOn: 'shared'
        },
        shared: './src/common.js'
    },
复制代码

配置runtimeThunk:

然后运行webpack,会生成四个bundle文件：

由上可知，除了生成 shared.bundle.js，index.bundle.js 和 another.bundle.js 之外，还生成了一个 runtime.bundle.js 文件。 2，SplitChunksPlugin 分离公共模块 webpack.config.js中配置如下:

const path = require('path');

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

复制代码

运行webpack打包如下：

动态导入：
webpack中只配置一个入口：

const path = require('path');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: 'index.bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

复制代码

index.js文件中使用动态导入：

import('./common').then(() => {
    console.log('动态导入成功');
});

运行webpack会生成两个bundle: