Code Splitting

• 将代码分离到不同的 bundle，按需加载
• 分离出更小的 bundle，控制资源加载优先级

入口起点

配置多入口

webpack.common.js

const commonConfig = {
  entry: {
    main: { import: "./src/main.js", dependOn: "shared" },
    index: { import: "./src/index.js", dependOn: "shared" },
    shared: ["lodash", "axios"], // 配置共享库
  },
};

防止重复

内置SplitChunksPlugin

const commonConfig = {
  optimization: {
    splitChunks: {
      chunks: "all", // async异步导入 initial同步导入
      cacheGroups: {
        venders: {
          test: /xxx/,
          filename: "xxx",
        },
      },
    },
  },
};

动态导入

代码运行过程中根据条件判断是否加载

import()

require.ensure

• chunkFilename

配置懒加载

• runtimeChunks

Magic Comments

• preload chunk 会在父 chunk 加载时，以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。
• preload chunk 具有中等优先级，并立即下载。prefetch chunk 在浏览器闲置时下载。
• preload chunk 会在父 chunk 中立即请求，用于当下时刻。prefetch chunk 会用于未来的某个时刻。

CDN

• publicPath 配置 CDN 路径
• externals 不需要打包

  externals: {
    // window._
    lodash: "_",
    // window.dayjs
    dayjs: "dayjs"
  },