Webpack 是现在前端开发中最常用的模块打包工具之一。一个项目中可能引入了多个第三方库和模块，如果所有模块都打包成一个文件，可能会导致代码体积过大，影响页面性能。因此，优化打包过程，实现按需加载，是一个非常重要的技术。
按需加载技术的实现方式
实现按需加载的技术可分为两类：预先加载和动态加载。预先加载指的是在页面加载时就把所有的组件和代码都加载进来，这样用户访问时就不需要等待，但是可能会出现首次加载缓慢的问题；动态加载则是在需要的时候才加载相关组件和代码，可以减少首次加载的时间，但是会增加后续的加载时间。
在 Webpack 中实现按需加载，一般有两种方式：手动分割代码和使用 Webpack 提供的动态加载方法。
手动分割代码
手动分割代码的方法相对来说比较简单。通过在 Webpack 配置文件中增加 entry 属性，分别指定需要打包的模块，并且配置 output 属性指定生成的文件名。当我们在页面中需要使用某个模块时，直接引入相应的文件即可。
例如，我们在项目中使用了 jquery 和 lodash 两个库，可以这样配置 Webpack：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -
------- ---------
------- --------
--
------- -
--------- -------------------
----- --------
-
-然后在我们需要用到 jquery 的页面中，使用 script 标签引入相应的文件即可：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------------
-------
------
---- ------------- ---
------- ---------------------------------------
--------
------------ -
------------------ --------
---
---------
-------
-------动态加载
使用 Webpack 提供的动态加载方法，需要使用到 import() 方法，这个方法会在需要时加载相应的模块。import() 方法会返回一个 Promise 对象，可以使用 then() 方法获取模块的内容。
例如，我们需要在点击按钮后才加载某个模块，我们可以这样写：
document.getElementById('btn').addEventListener('click', function() {
import('./module.js').then(module => {
// 使用模块内容
module.sayHello();
});
});Webpack 优化
按需加载虽然可以减小打包后文件的大小，但是也会带来一些性能上的问题。每次需要加载一个新模块，都需要先下载模块文件，这个过程中会阻塞页面的渲染，体验比较差。因此，如果需要实现按需加载，就需要对 Webpack 执行的过程做一些优化，提高用户的使用体验。
提取公共代码
一个项目中可能引入了很多第三方库和模块，这些库和模块可能会被多个页面引用到。如果每个页面都对这些库和模块进行动态加载，就会造成很多重复的代码下载和执行。我们可以使用 Webpack 提供的 CommonsChunkPlugin 插件，将这些公共的库和模块提取出来，生成一个共享的公共代码文件。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -
------ -------------
------ -------------
------ ------------
--
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- -------------------------------------
----- ---------
---------- -------- -------- -
-- --- -------- ------- ------ ------------ --- --------- -- ------
------ -
--------------- --
----------------------------- --
-------------------------------------------- ------------------ --- -
-
-
--
-
-利用缓存
在 Webpack 打包时，每个文件都会加上 hash 值，这个 hash 值会随着文件内容的改变而改变。因此，当某个模块内容发生改变时，它的 hash 值也会改变，这样我们就可以在用户下次访问页面时，利用缓存，只加载改变的模块。在 Webpack 中，我们可以使用 hash 值来实现缓存：
// webpack.config.js
module.exports = {
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
}
}使用 Tree Shaking 删除无用代码
Tree Shaking 是一种用于删除 JavaScript 中未被引用代码的技术。Webpack 使用 UglifyJSPlugin 插件来进行 Tree Shake。
在配置文件中设置：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -
-------- ------
-------- ----------- - -------- ----- ----
-------- -------------------------
-
--
-------- --------------
-
-
--
-------- -
--- ----------------
---------- -----
-------------- -
--------- -
------- -----
---------- -----
--------- -----
-
-
--
--总结
按需加载是前端开发中非常重要的一个理念，能有效提升网页性能、加快网页加载速度。Webpack 作为目前前端开发中最流行的打包工具，提供了很多优化打包性能的方法，例如通过提取公共代码等方法来优化代码打包。同时，利用现有的技术手段，实现按需加载也变得更加简单易用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f15d1968c7c53b0d7afd7