【webpack技巧】webpack代码分割方法

共享模块

配置 dependOn 在多个 chunk 之间共享模块

const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    index: {
      import: "./src/index.js",
      dependOn: "shared",
    },
    another: {
      import: "./src/another-module.js",
      dependOn: "shared",
    },
    shared: "lodash",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

如果我们要在一个 HTML 页面上使用多个入口时，还需设置 optimization.runtimeChunk: 'single'，原因时多入口时共享模块可能会造成多个页面共享一个模块实例，这样就造成了其中的变量共享，而我们实际上想要的效果是为每个页面生成一个新的实例。optimization.runtimeChunk: 'single' 的作用在于为每个入口添加一个只含有 runtime 的额外 chunk

module.exports = {
  optimization: {
    runtimeChunk: "single",
  },
};

拆分 chunk

const path = require("path");

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

懒加载/按需加载/动态导入

静态导入时即使没有用到这个模块依然会被引入，将静态导入修改为“用到这个模块的时候再导入”，这样就避免了一些模块未被使用却被加载。

静态导入 lodash：

import _ from "lodash";
function component() {
  const element = document.createElement("div");
  element.innerHTML = _.join(["Hello", "webpack"], " ");
  return element;
}

动态导入 lodash：

function component() {
  return import("lodash").then(({ default: _ }) => {
    const element = document.createElement("div");
    element.innerHTML = _.join(["Hello", "webpack"], " ");
    return element;
  });
}

使用 async 简写

async component() {
    const { default: _ } = await import('lodash');
    const element = document.createElement("div");
    element.innerHTML = _.join(["Hello", "webpack"], " ");
    return element;
}

webpack 遇到 import(****) 这样的语法的时候，会这样处理：

以**** 为入口新生成一个 Chunk，当代码执行到 import 所在的语句时，才会加载该 Chunk 所对应的文件。

用 CDN 加载外部资源

将一些较大的库使用 CDN 方式引入，可以避免将他们打包到 bundle 中从而降低代码包体积

module.exports = {
  externalsType: "script",
  externals: {
    lodash: ["https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js", "_"],
  },
};

在代码中使用：

import _ from "lodash";
console.log(_.head([1, 2, 3]));

参考

webpack 官网-构建性能