Skip to content

Latest commit

 

History

History
175 lines (143 loc) · 3.85 KB

课时-04.md

File metadata and controls

175 lines (143 loc) · 3.85 KB

课题 04:webpack 性能优化 1

本章讲解

  1. 分离 Manifest
  2. Code Splitting(代码分割)
  3. Bundle Splitting(打包分割)
  4. Tree Shaking(删除死代码)
  5. 开启 gzip
module.exports = (config, resolve) => {
  return () => {
    config.optimization.runtimeChunk({
      name: "manifest"
    });
  };
};
  1. 使用动态 import 或者 require.ensure 语法,在第一节已经讲解
  2. 使用 babel-plugin-import 插件按需引入一些组件库

将公共的包提取到 chunk-vendors 里面,比如你 require('vue'),webpack 会将 vue 打包进 chunk-vendors.bundle.js

module.exports = (config, resolve) => {
  return () => {
    config.optimization.splitChunks({
      chunks: "async",
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 3,
      maxInitialRequests: 3,
      cacheGroups: {
        vendors: {
          name: `chunk-vendors`,
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: "initial"
        },
        common: {
          name: `chunk-common`,
          minChunks: 2,
          priority: -20,
          chunks: "initial",
          reuseExistingChunk: true
        }
      }
    });
    config.optimization.usedExports(true);
  };
};

config/optimization.js

config.optimization.usedExports(true);

src/treeShaking.js

export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

在 main.js 中只引用了 cube

import { cube } from "./treeShaking";

console.log(cube(2));

未使用 Tree Shaking

{
  "./src/treeShaking.js": function(
    module,
    __webpack_exports__,
    __webpack_require__
  ) {
    "use strict";
    __webpack_require__.r(__webpack_exports__);
    __webpack_require__.d(__webpack_exports__, "square", function() {
      return square;
    });
    __webpack_require__.d(__webpack_exports__, "cube", function() {
      return cube;
    });
    function square(x) {
      return x * x;
    }
    function cube(x) {
      return x * x * x;
    }
  }
}

使用了 Tree Shaking

这里只导出了 cube 函数,并没有将 square 导出去

当然你可以看见 square 函数还是在 bundle 里面,但是在压缩的时候就会被干掉了,因为它并没有被引用

{
  "./src/treeShaking.js": function(
    module,
    __webpack_exports__,
    __webpack_require__
  ) {
    "use strict";
    __webpack_require__.d(__webpack_exports__, "a", function() {
      return cube;
    });
    function square(x) {
      return x * x;
    }
    function cube(x) {
      return x * x * x;
    }
  }
}

只有当函数给定输入后,产生相应的输出,且不修改任何外部的东西,才可以安全做 shaking 的操作

如何使用 tree-shaking?

  1. 确保代码是 es6 格式,即 export,import
  2. package.json 中,设置 sideEffects
  3. 确保 tree-shaking 的函数没有副作用
  4. babelrc 中设置 presets [["@babel/preset-env", { "modules": false }]] 禁止转换模块,交由 webpack 进行模块化处理
  5. 结合 uglifyjs-webpack-plugin

其实在 webpack4 我们根本不需要做这些操作了,因为 webpack 在生产环境已经帮我们默认添加好了,开箱即用!

CompressionWebpackPlugin.js

const CompressionWebpackPlugin = require("compression-webpack-plugin");

module.exports = (config, resolve) => {
  return () => {
    config.plugin("CompressionWebpackPlugin").use(CompressionWebpackPlugin, [
      {
        algorithm: "gzip",
        test: /\.js(\?.*)?$/i,
        threshold: 10240,
        minRatio: 0.8
      }
    ]);
  };
};