Webpack 打包优化之按需加载技术-JavaScript中文网-JavaScript教程资源分享门户

Webpack 打包优化之按需加载技术

Webpack 是现在前端开发中最常用的模块打包工具之一。一个项目中可能引入了多个第三方库和模块，如果所有模块都打包成一个文件，可能会导致代码体积过大，影响页面性能。因此，优化打包过程，实现按需加载，是一个非常重要的技术。

按需加载技术的实现方式

实现按需加载的技术可分为两类：预先加载和动态加载。预先加载指的是在页面加载时就把所有的组件和代码都加载进来，这样用户访问时就不需要等待，但是可能会出现首次加载缓慢的问题；动态加载则是在需要的时候才加载相关组件和代码，可以减少首次加载的时间，但是会增加后续的加载时间。

在 Webpack 中实现按需加载，一般有两种方式：手动分割代码和使用 Webpack 提供的动态加载方法。

手动分割代码

手动分割代码的方法相对来说比较简单。通过在 Webpack 配置文件中增加 entry 属性，分别指定需要打包的模块，并且配置 output 属性指定生成的文件名。当我们在页面中需要使用某个模块时，直接引入相应的文件即可。

例如，我们在项目中使用了 jquery 和 lodash 两个库，可以这样配置 Webpack：

-- -----------------
-------------- - -
  ------ -
    ------- ---------
    ------- --------
  --
  ------- -
    --------- -------------------
    ----- --------
  -
-

然后在我们需要用到 jquery 的页面中，使用 script 标签引入相应的文件即可：

--------- -----
----- ----------
------
  ----- ----------------
  --------------------------
-------
------
  ---- ------------- ---
  ------- ---------------------------------------
  --------
    ------------ -
      ------------------ --------
    ---
  ---------
-------
-------

动态加载

使用 Webpack 提供的动态加载方法，需要使用到 import() 方法，这个方法会在需要时加载相应的模块。import() 方法会返回一个 Promise 对象，可以使用 then() 方法获取模块的内容。

例如，我们需要在点击按钮后才加载某个模块，我们可以这样写：

-------------------------------------------------------- ---------- -
  --------------------------------- -- -
    -- ------
    ------------------
  ---
---

Webpack 优化

按需加载虽然可以减小打包后文件的大小，但是也会带来一些性能上的问题。每次需要加载一个新模块，都需要先下载模块文件，这个过程中会阻塞页面的渲染，体验比较差。因此，如果需要实现按需加载，就需要对 Webpack 执行的过程做一些优化，提高用户的使用体验。

提取公共代码

一个项目中可能引入了很多第三方库和模块，这些库和模块可能会被多个页面引用到。如果每个页面都对这些库和模块进行动态加载，就会造成很多重复的代码下载和执行。我们可以使用 Webpack 提供的 CommonsChunkPlugin 插件，将这些公共的库和模块提取出来，生成一个共享的公共代码文件。

-- -----------------
-------------- - -
  ------ -
    ------ -------------
    ------ -------------
    ------ ------------
  --
  ------- -
    ----- ----------------------- --------
    --------- -----------
  --
  -------- -
    --- -------------------------------------
      ----- ---------
      ---------- -------- -------- -
        -- --- -------- ------- ------ ------------ --- --------- -- ------
        ------ -
          --------------- --
          ----------------------------- --
          -------------------------------------------- ------------------ --- -
        -
      -
    --
  -
-

利用缓存

在 Webpack 打包时，每个文件都会加上 hash 值，这个 hash 值会随着文件内容的改变而改变。因此，当某个模块内容发生改变时，它的 hash 值也会改变，这样我们就可以在用户下次访问页面时，利用缓存，只加载改变的模块。在 Webpack 中，我们可以使用 hash 值来实现缓存：

-- -----------------
-------------- - -
  ------- -
    --------- ------------------------
    ----- ----------------------- -------
  -
-

使用 Tree Shaking 删除无用代码

Tree Shaking 是一种用于删除 JavaScript 中未被引用代码的技术。Webpack 使用 UglifyJSPlugin 插件来进行 Tree Shake。

在配置文件中设置：

------- -
  ------ -
    -
      ----- --------
      ---- -
        ------- ---------------
        -------- -
          -------- ------
          -------- ----------- - -------- ----- ----
          -------- -------------------------
        -
      --
      -------- --------------
    -
  -
--
-------- -
  --- ----------------
    ---------- -----
    -------------- -
      --------- -
        ------- -----
        ---------- -----
        --------- -----
      -
    -
  --
--

总结

按需加载是前端开发中非常重要的一个理念，能有效提升网页性能、加快网页加载速度。Webpack 作为目前前端开发中最流行的打包工具，提供了很多优化打包性能的方法，例如通过提取公共代码等方法来优化代码打包。同时，利用现有的技术手段，实现按需加载也变得更加简单易用。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/646f15d1968c7c53b0d7afd7