打包部署

Webpack应用分割与生产环境部署

SplitChunks

代码分割是提升Web性能表现的重要分割，我们常做的代码分割也分为公共代码提取与按需加载等方式。公共代码提取即是将第三方渲染模块或者库与应用本身的逻辑代码分割，或者将应用中多个模块间的公共代码提取出来，划分到独立的Chunk中，以方便客户端进行缓存等操作。

不同于Webpack 3中需要依赖CommonChunksPlugin进行配置，Webpack 4引入了 SplitChunksPlugin，并为我们提供了开箱即用的代码优化特性，Webpack会根据以下情况自动进行代码分割操作：

新的块是在多个模块间共享，或者来自于node_modules目录；
新的块在压缩之前的大小应该超过30KB；
页面所需并发加载的块数量应该小于或者等于5；
初始页面加载的块数量应该小于或者等于3；

SplitChunksPlugin的默认配置如下：

splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
    default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

值得一提的是，这里的chunks选项有initial,async与 all 三个配置，上述配置即是分别针对初始chunks、按需加载的chunks与全部的chunks进行优化；如果将vendors的chunks设置为 initial，那么它将忽略通过动态导入的模块包包含的第三方库代码。而priority则用于指定某个自定义的Cache Group捕获代码的优先级，其默认值为0。在 common-chunk-and-vendor-chunk 例子中，我们即针对入口进行优化，提取出入口公共的vendor模块与业务模块：

{
	splitChunks: {
		// 禁止默认 splitChunks 行为，防止生成 a~b.js 这样的公用包
		default: false,
		cacheGroups: {
			commons: {
				chunks: "initial",
				minChunks: 2,
				maxInitialRequests: 5, // The default limit is too small to showcase the effect
				minSize: 0 // This is example is too small to create commons chunks
			},
			vendor: {
				test: /node_modules/,
				chunks: "initial",
				name: "vendor",
				priority: 10,
				enforce: true
			}
		}
	}
}

我们也可以设置node_modules中依赖按照NPM包方式分割：

{
  test: /[\\/]node_modules[\\/]/,
  name(module) {
    // get the name. E.g. node_modules/packageName/not/this/part.js
    // or node_modules/packageName
    const packageName = module.context.match(
      /[\\/]node_modules[\\/](.*?)([\\/]|$)/,
    )[1];

    // npm package names are URL-safe, but some servers don't like @ symbols
    return `npm.${packageName.replace('@', '')}`;
  },
}

runtimeChunk

Webpack的optimization还包含了runtimeChunk属性，当该属性值被设置为true时，即会为每个Entry添加仅包含运行时信息的Chunk；当该属性值被设置为single时，即为所有的Entry创建公用的包含运行时的Chunk。我们也可以在代码中使用import语句，动态地进行块划分，实现代码的按需加载：

// Webpack 3 之后支持显式指定 Chunk 名
import(/* webpackChunkName: "optional-name" */ "./module")
  .then((module) => {
    /* ... */
  })
  .catch((error) => {
    /* ... */
  });

webpackJsonp([0], {
  KMic: function(a, b, c) {
    ...
  },
  co9Y: function(a, b, c) {
    ...
  },
});

如果是使用React进行项目开发，推荐使用 react-loadable 进行组件的按需加载，他能够优雅地处理组件加载、服务端渲染等场景。Webpack还内建支持基于ES6 Module规范的Tree Shaking优化，即仅从导入文件中提取出所需要的代码。

构建目标

UMD

Webpack将output中的libraryTarget设置为umd即可编译为UMD模式：

(function (define) {
  define(function () {
    // ...
  });
})(
  typeof module === "object" && module.exports && typeof define !== "function"
    ? function (factory) {
        module.exports = factory();
      }
    : define
);

如果在代码里使用了 export default xxx 这种形式作为导出，那么最终输出的模块中会出现 libraryName.default 这种形式。如果希望以default作为默认入口，那么可以通过设置libraryExport为default，来将default的值设置为libraryName的值本身。

最近更新于0001-01-01