减小打包后文件体积

按需加载

如果我们将页面全部打包进一个 JS 文件的话，虽然将多个请求合并了，但是同样也加载了很多并不需要的代码，耗费了更长的时间。那么为了首页能更快地呈现给用户，我们肯定是希望首页能加载的文件体积越小越好，这时候我们就可以使用按需加载，将每个路由页面单独打包为一个文件。

Tree Shaking

只支持ESModule
Tree Shaking 可以实现删除项目中未被引用的代码，比如

  1. // test.js
  2. export const a = 1;
  3. export const b = 2;
  4. // index.js
  5. import { a } from "./test.js";

对于以上情况，test 文件中的变量 b 如果没有在项目中使用到的话，就不会被打包到文件中。
如果你使用 Webpack 4 的话，开启生产环境就会自动启动这个优化功能。

Scope Hoisting

Scope Hoisting 会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去。比如我们希望打包两个文件

  1. // test.js
  2. export const a = 1;
  1. // index.js
  2. import { a } from "./test.js";

对于这种情况，我们打包出来的代码会类似这样

  1. [
  2.   /* 0 */
  3.   function (module, exports, require) {
  4.     //...
  5.   },
  6.   /* 1 */
  7.   function (module, exports, require) {
  8.     //...
  9.   },
  10. ];

但是如果我们使用 Scope Hoisting 的话，代码就会尽可能的合并到一个函数中去，也就变成了这样的类似代码

  1. [
  2.   /* 0 */
  3.   function (module, exports, require) {
  4.     //...
  5.   },
  6. ];

样的打包方式生成的代码明显比之前的少多了。如果在 Webpack4 中你希望开启这个功能，只需要启用 optimization.concatenateModules 就可以了。

  1. module.exports = {
  2.   optimization: {
  3.     concatenateModules: true,
  4.   },
  5. };

加快打包速度

优化 Loader

  • 因为 Babel 会将代码转为字符串生成 AST（抽象语法树）
  • 然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低

首先我们可以减小 Loader 的文件搜索范围

  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         // js 文件才使用 babel
  6.         test: /\.js$/,
  7.         loader: "babel-loader",
  8.         // 只在 src 文件夹下查找
  9.         include: [resolve("src")],
  10.         // 不会去查找的路径
  11.         exclude: /node_modules/,
  12.       },
  13.     ],
  14.   },
  15. };

还可以将 Babel 编译过的文件缓存起来，下次只需要编译更改过的代码文件即可，这样可以大幅度加快打包时间。
loader: ‘babel-loader?cacheDirectory=true’

HappyPack

  • 受限于 Node 是单线程运行的，所以 Webpack 在打包的过程中也是单线程的
  • 特别是在执行 Loader 的时候，长时间编译的任务很多，这样就会导致等待的情况。

HappyPack 可以将 Loader 的同步执行转换为并行的，这样就能充分利用系统资源来加快打包效率了

  1. module: {
  2.   loaders: [
  3.     {
  4.       test: /\.js$/,
  5.       include: [resolve('src')],
  6.       exclude: /node_modules/,
  7.       // id 后面的内容对应下面
  8.       loader: 'happypack/loader?id=happybabel'
  9.     }
  10.   ]
  11. },
  12. plugins: [
  13.   new HappyPack({
  14.     id: 'happybabel',
  15.     loaders: ['babel-loader?cacheDirectory'],
  16.     // 开启 4 个线程
  17.     threads: 4
  18.   })
  19. ]

DllPlugin

  • DllPlugin 可以将特定的类库提前打包然后引入

  • 这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案。

    1. // 单独配置在一个文件中
    2. // webpack.dll.conf.js
    3. const path = require("path");
    4. const webpack = require("webpack");
    5. module.exports = {
    6. entry: {
    7.   // 想统一打包的类库
    8.   vendor: ["react"],
    9. },
    10. output: {
    11.   path: path.join(__dirname, "dist"),
    12.   filename: "[name].dll.js",
    13.   library: "[name]-[hash]",
    14. },
    15. plugins: [
    16.   new webpack.DllPlugin({
    17.     // name 必须和 output.library 一致
    18.     name: "[name]-[hash]",
    19.     // 该属性需要与 DllReferencePlugin 中一致
    20.     context: __dirname,
    21.     path: path.join(__dirname, "dist", "[name]-manifest.json"),
    22.   }),
    23. ],
    24. };

    然后我们需要执行这个配置文件生成依赖文件，接下来我们需要使用 DllReferencePlugin 将依赖文件引入项目中

    1. // webpack.conf.js
    2. module.exports = {
    3. // ...省略其他配置
    4. plugins: [
    5.   new webpack.DllReferencePlugin({
    6.     context: __dirname,
    7.     // manifest 就是之前打包出来的 json 文件
    8.     manifest: require("./dist/vendor-manifest.json"),
    9.   }),
    10. ],
    11. };

    代码压缩

  • 将 mode 设置为 production 就可以默认开启代码压缩

  • 代码压缩也是我们必做的性能优化方案，当然我们不止可以压缩 JS 代码，还可以压缩 HTML、CSS 代码，并且在压缩 JS 代码的过程中，我们还可以通过配置实现比如删除 console.log 这类代码的功能。