demo09 使用 SplitChunksPlugin 分离第三方依赖包以及异步包

栏目: JavaScript · 发布时间: 5年前

内容简介:在单页面或多页面应用中,通过代码分离的方式,能够优化性能。比如把异步加载的代码分离成一个单独的chunk,等到需要调用的时候再按需加载(比如click时),这样可以减少首屏的代码体积,从而提高首屏的加载速度。另外,在我们的项目中,可能会用到很多的第三方库(比如 lodash 、rxjs 等),而往往这些第三方依赖库的代码一般很少变化,因此,很适合把第三方依赖库单独分离成一个包,并且包名包含 hash( webpack 可以轻松做到),这样的好处在于,可以配合浏览器http的缓存机制 (比如 max-age

在单页面或多页面应用中,通过代码分离的方式,能够优化性能。

比如把异步加载的代码分离成一个单独的chunk,等到需要调用的时候再按需加载(比如click时),这样可以减少首屏的代码体积,从而提高首屏的加载速度。

另外,在我们的项目中,可能会用到很多的第三方库(比如 lodash 、rxjs 等),而往往这些第三方依赖库的代码一般很少变化,因此,很适合把第三方依赖库单独分离成一个包,并且包名包含 hash( webpack 可以轻松做到),这样的好处在于,可以配合浏览器http的缓存机制 (比如 max-age ),实现对相关资源包的长缓存,从而优化性能。

一般需要代码分割的场景有:

  • 分离业务代码和第三方依赖
  • 分离首次加载和异步加载的代码
  • 分离业务代码和业务的公用代码

2.安装相关依赖

通过 html-webpack-plugin 自动生成 index.html

npm install -D html-webpack-plugin
npm install -D webpack // html-webpack-plugin 依赖于 webpack
npm install --save axios lodash
复制代码

3.目录结构

// `--` 代表目录, `-` 代表文件
  --demo09
    --src
      -app.js
      -async-module1.js
      -async-module2.js
      -module.js
    -index.html
    -webpack.config.js
复制代码

src/async-module1.js

export const data = 'this is async module1';
复制代码

src/async-module2.js

export const data = 'this is async module2';
复制代码

src/module.js

export const sayHello1 = () => {
  console.log('Hi I want to say hello1');
}

export const sayHello2 = () => {
  console.log('Hi I want to say hello2');
}

export const sayHello3 = () => {
  console.log('Hi I want to say hello3');
}
复制代码

src/app.js

import { sayHello1, sayHello2, sayHello3 } from './module';

sayHello1();
sayHello2();
sayHello3();


// 异步加载 async-module1
setTimeout(() => {
  require.ensure(
    [],
    function () {
      const asyncModule = require("./async-module1");
      console.log(asyncModule.data);
    },
    "module1"
  );
}, 3000);

// 异步加载 async-module2
setTimeout(() => {
  require.ensure(
    [],
    function () {
      const asyncModule2 = require("./async-module2");
      console.log(asyncModule2.data);
    },
    "module2"
  );
}, 3000);


// 引用第三方库
// https://github.com/lodash/lodash
import * as _ from "lodash";
// https://github.com/axios/axios
import * as axios from "axios";

console.log(_);
console.log(axios);
复制代码

3.配置打包第三方库的规则

使用 webpack4 的 splitChunks 可以很容易的做到。

关于 splitChunks 的各个参数的用法,可以看我的这篇文章 demo08 关于SplitChunksPlugin

splitChunks: {
      cacheGroups: {
        vendors: {
          chunks: "all", // 使用 all 模式
          test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 下的模块
          name: "vendors", // 包命名,最终的命名要结合 output 的 chunkFilename
          minChunks: 1,
          minSize: 30000,
          priority: 10 // 设置优先级
        }
      }
    }
复制代码

4.配置打包异步加载包的规则

打包异步加载包

splitChunks: {
      cacheGroups: {
        async: {
          chunks: "async",
          minChunks: 1, // 代码块至少被引用的次数
          maxInitialRequests: 3, // 设置最大的请求数
          minSize: 0, // 设置每个 chunk 最小的大小 (默认30000),这里设置为 0,以方便测试
          automaticNameDelimiter: '~',
          priority: 9
        },
      }
    }
复制代码

5.完整的 webpack 配置文件

const path = require("path");

module.exports = {
  mode: 'development', // 使用development模式,方便看到各个包名中的 [name],以区分各个包,在production模式下,[name]会被转化为0 1 2...
  entry: {
    app: "./src/app.js",
  },

  output: {
    publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径
    path: path.resolve(__dirname, "dist"), // 打包后的输出目录
    filename: "[name].[chunkhash].bundle.js", // 每个包包含 chunkhash
    chunkFilename: "[id].[chunkhash].chunk.js"
  },
  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        async: {
          chunks: "async",
          minChunks: 1, // 代码块至少被引用的次数
          maxInitialRequests: 3, // 设置最大的请求数
          minSize: 0, // 设置每个 chunk 最小的大小 (默认30000),这里设置为 0,以方便测试
          automaticNameDelimiter: '~',
          priority: 9
        },
        vendors: {
          chunks: "all", // 使用 all 模式
          test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 下的模块
          name: "vendors", // 包命名,最终的命名要结合 output 的 chunkFilename
          minChunks: 1,
          minSize: 30000,
          priority: 10 // 设置优先级
        }
      }
    }
  }
};

复制代码

5.执行打包命令

(默认你已经安装了全局 webpack 以及 webpack-cli )

webpack
复制代码

打包成功后,结果输出在 demo09 的 dist 目录下

(注意这里设置 "mode""development" )

app.226a343cb53e0a689358.chunk.js (app主模块)
async~module1.87d116fd41640c30a6b2.chunk.js (async-module1模块)
async~module2.65866f4d15253512c981.chunk (async-module2模块)
runtime.4e6de616bd3030f8bff8.bundle.js (webpack运行时模块)
vendors.a83c085b3a7ac03b1b47.chunk.js (第三方依赖模块)

复制代码

6.修改程序代码,验证打包结果

可以通过修改 app.js 等代码,再次运行 webpack 命令,你会发现,第三方依赖模块的包名没有被改变: vendors.a83c085b3a7ac03b1b47.chunk.js

在浏览器运行 dist/index.html,打开控制台可以观察异步加载模块的效果。

(备注:runtime.xxxxxxxx.bundle.js模块包含了对异步加载模块的引用逻辑,此外,异步加载引用的相对路径受 output -> publicPath 配置的影响)


以上所述就是小编给大家介绍的《demo09 使用 SplitChunksPlugin 分离第三方依赖包以及异步包》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

顾客要买什么

顾客要买什么

[美]迈克尔·西尔 / 方海萍 / 中国人民大学出版社 / 2006-10 / 38.00元

《顾客要买什么》告诉我们全球的中产阶级如何正在改造着消费品市场:对低价的产品和服务进行趋低消费,对于高端的产品和服务要趋优消费,而对于日趋乏味、价值降低的中档商品则避而远之。这些消费者大多是女性,教育程度高,可支配收入多,买东西的时候也更会精打细算。她们选购、使用商品和服务的时候都是有目的的,有一种大权在握的感觉。消费对她们来说并不是非做不可的麻烦事,也不是什么无法避免的琐事,而是如何明智地花钱的......一起来看看 《顾客要买什么》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器