webpack中的代码拆分

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/19/webpack%E4%B8%AD%E7%9A%84%E4%BB%A3%E7%A0%81%E6%8B%86%E5%88%86/

摘要

本文主要讲述了：

为什么需要代码拆分
多 entry
动态引入模块

正文

为什么需要代码拆分

把整个项目的代码打成一个包，虽然减小了并发数，但也延长了加载时间，破坏了用户体验。

为了优化用户体验，开发者需要把代码进行拆分，从而实现按需加载。

多 entry

最简单的代码拆分方式是多个 entry。

示例：

learn_webpack/webpack.config.js

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    foo: './src/foo.js',
  },
  output: {
    filename: '[name].bundle.js',
  },
};

learn_webpack/src/index.js

1 2	import _ from 'lodash'; console.log('index.js');

learn_webpack/src/foo.js

1 2	import _ from 'lodash'; console.log('foo.js');

多 entry 虽然拆分了代码，但如果多个 entry 都引入了相同的依赖，就会造成 JavaScript 代码冗余，配置splitChunks可以将公共部分抽取出来进行独立打包。

示例：

learn_webpack/webpack.config.js

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    foo: './src/foo.js',
  },
  output: {
    filename: '[name].bundle.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

learn_webpack/src/index.js

1 2	import _ from 'lodash'; console.log('index.js');

learn_webpack/src/foo.js

1 2	import _ from 'lodash'; console.log('foo.js');

动态引入

webpack支持使用import()动态引入模块。

注意：import()基于Promise。

示例：

learn_webpack/webpack.config.js

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
  },
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
  },
};

learn_webpack/src/index.js

function getComponent() {
  return import(/* webpackChunkName: "lodash" */ 'lodash')
    .then(({ default: _ }) => {
      const 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);
});