深入浅出 Webpack—— 实现代码分割与懒加载

深入浅出 Webpack——实现代码分割与懒加载

简介

在现代 web 应用中，我们需要导入大量 JavaScript 代码文件，而这些文件体积往往非常大。如果所有的代码都被打包成一个文件，那么页面加载将会非常缓慢，影响用户体验。Webpack 提供了代码分割与懒加载的功能，可以将代码分割成多个小块，只在需要时才加载。

本文将讲解如何使用 webpack 实现代码分割与懒加载，并提供详细的示例代码和指导意义。

代码分割

代码分割可以将代码分割成多个小块，在需要时再加载，从而减少页面加载时间。常见的代码分割方式有以下三种。

1. 入口起点

入口起点是将应用程序分割成多个 bundle 的最简单的方法。每个入口起点对应一个输出 bundle 文件。不过，这种方法需要手动配置，编写额外的代码，不太灵活。

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

1. 防止重复

由于第一种方法需要手动配置，可以选择防止重复模块的方法，即使用 CommonsChunkPlugin 插件，将公共模块提取到独立的文件中。

// www.javascriptcn.com code example
// webpack.config.js
const webpack = require('webpack');

module.exports = {
  entry: {
    index: './src/index.js',
    home: './src/home.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

1. 动态导入

动态导入是将代码在需要时才加载。可以使用 import() 函数实现。

// www.javascriptcn.com code example
// index.js
(function() {
  document.getElementById('btn-index').addEventListener('click', function() {
    import('./print').then(function(module) {
      module.default();
    });
  });
})();

// print.js
export default function() {
  console.log('Button clicked: Here\'s "print.js"!');
}

懒加载

懒加载是指在需要时才加载代码。懒加载可以大大提高页面加载速度，提升用户体验。

Webpack 4 以上版本可以使用 import() 函数实现懒加载。懒加载的基本用法与动态导入相同，只是需要将代码片段放在单独的模块中。

// www.javascriptcn.com code example
// index.js
(function() {
  document.getElementById('btn-index').addEventListener('click', function() {
    import('./lazy').then(function(module) {
      module.default();
    });
  });
})();

// lazy.js
export default function() {
  console.log('Button clicked: Here\'s "lazy.js"!');
}

需要注意的是，使用懒加载时，需要交由 webpack 进行处理，因此需要将 babel 配置文件中的 presets 修改为 ["@babel/preset-env", { "targets": { "chrome": "60" }, "modules": false }]，排除对 import() 的转换。

结语

本文介绍了如何使用 webpack 实现代码分割与懒加载。这些功能可以极大地提高 web 应用的性能，缩短页面加载时间，提升用户体验。使用这些功能需要注意一些细节，例如需要使用正确的插件和 babel 配置，才能获得最佳结果。

建议读者在实践过程中根据自己的需要灵活配置 webpack，以达到最优的效果。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d80353a941bf7134e4ae96