webpack4.15.1 学习笔记(六) — 代码拆分(Code Splitting)

目录

• 入口起点
• 防止重复
• 动态导入(dynamic imports)

代码拆分能够将代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码拆分可以用于获取更小的 bundle，以及控制资源加载优先级，会影响加载时间。

常用的代码拆分方法：

• 入口起点：使用 entry 配置手动地分离代码。
• 防止重复：使用 CommonsChunkPlugin去重和分离 chunk。
• 动态导入：通过模块的内联函数调用来分离代码。

入口起点

最简单、最直观的分离代码的方式。但手动配置较多，并有一些陷阱。

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

构建结果会生成 index.bundle.js 和 print.bundle.js ：

• 入口 chunks 之间包含的重复的模块，都会被引入到各个 bundle 中。
• 该方法不够灵活，且不能将核心应用程序逻辑进行动态拆分代码。

防止重复

SplitChunksPlugin插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk：

CommonsChunkPlugin在 webpack v4 中删除。

RemovedPluginError: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

// ./src/index.js
import _ from 'lodash';
console.log(
    _.join(['index', 'module', 'loaded!'], ' ')
);

// ./src/print.js
import _ from 'lodash';
console.log(
    _.join(['print', 'module', 'loaded!'], ' ')
);

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
     splitChunks: {
        chunks: 'all',
        name:'common'
     },
   },
};

构建结果会生成 index.bundle.js 、 print.bundle.js 及common.bundle.js, 将 lodash 分离到单独的 chunk，并且将其从主包中移除，减轻了大小。

动态导入(dynamic imports)

使用符合 ECMAScript 提案的 import() 语法。import() 调用会在内部用到 promises。如果在旧版本浏览器中使用，需要使用 polyfill 库（如 es6-promise或 promise-polyfill）。

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    index: './src/index.js'
  },
  plugins: [
    new HTMLWebpackPlugin({
      title: 'Code Splitting'
   })
  ],
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',   // 决定非入口 chunk 的名称
    path: path.resolve(__dirname, 'dist')
  }
};

== ./src/index.js==：注释中使用了 webpackChunkName。这样做 bundle 被命名为 lodash.bundle.js

vendors 缓存组的配置可以检测第三方模块是否在 node_modules 中，如果存在则该 splitChunks 生效，将会分离到 vendors~... 这样的文件中，因此此处我生成的文件名 为 vendors~lodash.bundle.js

function getComponent() {
    return import( /* webpackChunkName: "lodash" */ 'lodash').then( _ => {
        var element = document.createElement('div');
        element.innerHTML = _.join(['Hello', 'webpack'], ' ');
        return element;
    }).catch(error => 'An error occurred while loading the component');
}
getComponent().then(component => {
    document.body.appendChild(component);
})