webpack(七)之代码分离

代码分离是webpack一个非常重要的特性，将代码分离到不同的bundle文件中，到时候可以按需加载或者并行加载这些文件。

webpack通过代码分离来控制加载资源的优先级提高代码的加载性能。

webpack常用的三种代码分离方式：

入口起点：使用entry配置手动分离代码。

防止重复：通过Entry Dependencies 或者 SplitChunksPlugun 去重和分离代码。

动态导入：通过模块的内联函数调用来分离代码。

 

入口起点：

entry: {
    main: "./src/main.js",
    index: "./src/index.js"
},

output: {
    filename: "[name].bundle.js"
    path: resolveApp("./build")
}

防止重复:

entry: {
    main: { import: "./src/main.js", dependOn: "lodash" },
    index: { import: "./src/index.js", dependOn: "lodash" },
    lodash: "lodash"
},

output: {
    filename: "[name].bundle.js"
    path: resolveApp("./build")
}

optimization: {
    splitChunks: {
        // async 异步导入
        // initial 同步导入
        // all 异步、同步导入
        chunks: "all",
        minSize: 20000,
        maxSize: 30000,
        minChunks: 1 //表示引入的包，至少被导入几次
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                filename: "[id]_vendor.js"
            }
        }
    }
}        

动态导入:

第一种：使用ECMAScript中的 import() 语法来完成（推荐）

第二种：使用webpack 遗留的 require.ensure