代码分离

webpack的性能优化比较多，比如分包处理，减小包的体积，CDN服务器等，而代码分离就是分包处理中的一种。

什么是代码分离

1. 主要目的是将代码分离到不同的bundle中，之后可以按需加载或者并行加载这些文件
2. 代码分离可以分出更小的bundle，以及控制资源加载优先级，提供代码的加载性能

如何实现代码分离

1. 入口起点：使用entry配置手动分离代码
2. 防止重复，使用Entry Dependencies

多入口起点

const path = require('path');

// 导出配置信息
module.exports = {
    mode: 'production',
    entry: {
        index: {import: './src/index.js'},
        main: {import: './src/main.js'}
    },
    output: {
        // 这里的[name]用于占位，便于告诉webpack分离代码和打包后的文件名
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, './build'),
        clean: true
    },
    resolve: {...}
}

打包后效果如图

这样之后index.js和main.js就实现了代码分离

思考

如果说这两个文件中都引入了同一个库呢，那么在打包的时候肯定也会把依赖的库打包进去，但是同一个库被打包两次，是不是有些浪费，可不可让两个文件在打包之后也实现共享呢？

先看一下不做任何共享相关的配置

文件中使用axios，以main.js为例，index.js类似

打包效果 两个文件中都有axios

进行配置使两个文件可以共享axios(入口依赖)

相关配置如下

entry: {
        index: {
            import: './src/index.js',
            dependOn: "shared"
        },
        main: {
            import: './src/main.js',
            dependOn: "shared"
        },
        shared: ['axios']
    },

再看打包效果，多出来一个共享的文件

OK，结束