webpack分包的几种方式和优缺点

分包是 webpack 一个亮点，webpack中一共有三种分包模式，让我们一起来学习记录一下叭！🚀

一、入口分离：

在webpack.config.js配置文件 entry 选项中可以配置多个入口，但是这种方式打包后会存在同一个依赖在不同的文件中引用会被加载多次，造成文件会很大，但是引入的文件中可能只有少部分代码且只使用该依赖的某一个功能，造成资源浪费！

webpack.config.js

js 复制代码

module.exports={
...,
entry:{
    index:"./scr/index.js",
    chunk_2:"./scr/chunk_2.js",
},

 output: {
    // 输出路径
    path: path.join(__dirname, "dist"),
    // 输出文件名
    filename: "[contenthash:64].js",
    // 在输出的时候，清空之前的文件夹
    clean: true,
  },
...,
}

index.js：

chunk-2.js:

👆如上图所示，index.js 文件中的业务代码里比 chunk-2.js 要多很多，但是由于 chunk-2.js 引入了lodashJS 库,打包后的体积：👇

在index.js中也引入了 lodashJS 库，并没有使用库中功能，打包后的体积：

chunk-2.js: 635KIB

index.js: 961KIB

二、entry 防止重复：

1、把每个文件的chunk设置为对象，声明一个 shared 表示共给的模块，这样打包后只会根据当前内容进行打包。

js 复制代码

  entry: {
    index: {
      import: "./src/index.js",
      filename: "[name].js",
      dependOn: "shared",
    },
    chunk: {
      import: "./src/chunk-2.js",
      filename: "[name].js",
      dependOn: "shared",
    },
    shared: {
      import: "lodash",
      filename: "lodash.js",
    }
  },

体积也相对变小：

2、webpack还提供另外一种方式：

文件以最初的方法导入

js 复制代码

entry: {
    index: "./src/index.js",
    chunk: "./src/chunk-2.js",
  },

webpack提供一个优化配置项， optimization.splitChunks.chunks:'all' ,配置后自动进行分割；更多详细配置请参考文档；

js 复制代码

module.exports = {
    ...,
  optimization: {
    // 代码分割
    splitChunks: {
      chunks: "all", // 所有的chunks都进行分割
    },
  },
  ...,
}

三、动态导入：

1、动态导入其实是利用 es6 import() 函数进行异步导入：

用 import() 方式导入也可以实现 chunks 分包

/* webpackChunkName: "lodash" / 为lodash取别名，这种方式也称作为：魔法注释

js 复制代码

const getComponent = () => {
  return import(/* webpackChunkName: "lodash" */ "lodash").then(
    ({ default: _ }) => {
      const element = document.createElement("div");
      element.innerHTML = _.join(["Hello", "Webpack", "wrold"]);
      element.style.color = "red";
      document.body.appendChild(element);
      return element;
    }
  );
};

getComponent().then((element) => {
  console.log("element", element);
});

打包后的大小：

四、动态导入的应用场景：

懒加载：

懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断电处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体积，因为某些代码块可能永远不会被加载。

js 复制代码

// 懒加载
const lazy = document.createElement("button");
lazy.textContent = "点击懒加载";
lazy.addEventListener("click", () => {
  import(/* webpackChunkName: "math" */ "./math.js").then(({ add }) => {
    console.log(add);
  });
});
document.body.appendChild(lazy);

如图所示👇：只有点击按钮的时候 math.js 才被加载进来；