详解webpack编译速度提升之DllPlugin

 更新时间:2019-02-06 22:00:23   作者:佚名   我要评论(0)

一、前言

The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance.

DllPlu

一、前言

The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance.

DllPlugin 结合 DllRefrencePlugin 插件的运用,对将要产出的bundle文件进行拆解打包,可以很彻底地加快webpack的打包速度,从而在开发过程中极大地缩减构建时间。

二、构建效果

结论先行: 使用 DllPluginDllRefrencePlugin 进行构建,可以缩减50%~70%的构建时间。

参考Demo: dllplugin-demo

2.1 使用DllPlugin前的构建速度

 

入口文件 main.js 引入了一个 jQuery

文件,图示打包耗时2.3s。

2.2 使用DllPlugin后的构建速度

 

使用插件后,打包耗时0.6s,单次对比,缩减时长达到73%! 2.3 如何验证DLLPlugin已经生效

对比上面两张图打包的模块列表,图二有一行不一样的输出:

[0] delegated ./src/components/jquery.js from dll-reference vendor_57c12dcd8d9774596525 42 bytes {0} [built]

这说明,此次的打包过程,没有重新打包 jQuery 模块,而是直接从 vendor_57c12dcd8d9774596525 中代理了。

三、Get Started

DllPlugin作用示意图:

 

3.1 配置webpack.dll.config.js打包静态公共资源

3.1.1 定义webpack.dll.config.js

为了减小篇幅,只帖关键配置内容,详细访问 dllplugin-demo :

// webpack.dll.config.js
module.exports = {
  entry: {
    // 定义程序中打包公共文件的入口文件vendor.js
    vendor: [path.resolve(src, 'js', 'vendor.js')],
  },
  
  plugins: [
    new webpack.DllPlugin({
      // manifest缓存文件的请求上下文(默认为webpack执行环境上下文)
      context: process.cwd(),
      
      // manifest.json文件的输出位置
      path: path.join(src, 'js', 'dll', '[name]-manifest.json'),
      
      // 定义打包的公共vendor文件对外暴露的函数名
      name: '[name]_[hash]'
    })
  ]
}

3.1.2 声明静态公共资源

在配置好 webpack.dll.config.js 文件之后,在 vendor.js 中声明项目程序中所引用的静态公共资源。

// vendor.js
// 引入自定义在项目目录中的公共资源(可以在配置中声明alias映射关系)
import 'jquery';

// or 引入npm包资源
// import 'Vue';

3.1.3 打包静态公共资源

// cross-env模块需要另外安装
cross-env NODE_ENV=production webpack --config webpack.dll.config.js --colors --display-modules

根据 webpack.dll.config.js ,会在指定位置生成 vendor.dll.js 文件。

3.2 配置webpack.config.js打包入口文件

生成静态公共资源 vendor.dll.js 之后,下一步就要在入口文件中关联引用,这项工作则是由 DllRefrencePlugin 完成的。

3.2.1 在webpack.config.js中关联引用

// webpack.config.js
module.exports = {
  entry: {
    // 项目入口文件
    'app':path.resolve(src, 'js', 'main.js')
  },
  plugins: [
    // dllPlugin关联配置
    new webpack.DllReferencePlugin({
      // 跟dll.config里面DllPlugin的context一致
      context: process.cwd(), 
      
      // dll过程生成的manifest文件
      manifest: require(path.join(src, 'js', "dll", "vendor-manifest.json"))
    })
  ]
}

3.2.2 项目入口文件中引用静态公共资源

// main.js
// 引入的公共模块如果在vendor中有被引用过,那么编译的时候直接使用静态文件vendor.dll.js
import $ from 'jquery';
console.log($)

// import Vue from "Vue";
// console.log(Vue)

引入方式没有什么不同的,跟平时正常引入即可。

3.2.3 项目模板中引用公共静态资源

最后一步,在模板中注入 vendor.dll.js

<!-- index.html -->
<script type="text/javascript" src="/src/js/dll/vendor.dll.js"></script>

如此,在接下来的本地开发(dev过程)和线上构建过程,将不再重复静态公共资源的构建,极大地缩减我们的构建时间。

结语

以上为webpack(Version 4)使用过程中的小小总结,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 详解如何webpack使用DllPlugin
  • 详解基于DllPlugin和DllReferencePlugin的webpack构建优化

相关文章

  • 详解webpack编译速度提升之DllPlugin

    详解webpack编译速度提升之DllPlugin

    一、前言 The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance. DllPlu
    2019-02-06
  • Vue从TodoList中学父子组件通信

    Vue从TodoList中学父子组件通信

    简单的 TodoList 实现一个简单的 todolist,当我输入内容后,点击提交自动添加在下面,如下图所示: 用代码实现这个效果: <div id="app"> <input ty
    2019-02-06
  • Tensorflow分类器项目自定义数据读入的实现

    Tensorflow分类器项目自定义数据读入的实现

    在照着Tensorflow官网的demo敲了一遍分类器项目的代码后,运行倒是成功了,结果也不错。但是最终还是要训练自己的数据,所以尝试准备加载自定义的数据,然而d
    2019-02-06
  • ES6 对象的新功能与解构赋值介绍

    ES6 对象的新功能与解构赋值介绍

    ES6 通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程。 一、字面量语法扩展 在 ES6 模式下使用字
    2019-02-06
  • Redis连接错误的情况总结分析

    Redis连接错误的情况总结分析

    前言 最近由于流量增大,redis 出现了一连串错误,比如: LOADING Redis is loading the dataset in memory use of closed network connection connec
    2019-02-06
  • 使用TensorFlow实现二分类的方法示例

    使用TensorFlow实现二分类的方法示例

    使用TensorFlow构建一个神经网络来实现二分类,主要包括输入数据格式、隐藏层数的定义、损失函数的选择、优化函数的选择、输出层。下面通过numpy来随机生成一
    2019-02-06
  • PHP实现字符串大小写转函数的功能实例

    PHP实现字符串大小写转函数的功能实例

    字符串的大小写转换功能在日常中经常使用。那么如何实现一个简单的大小写转换功能呢&#63; 在php中,最终使用的是c语言的toupper,tolower函数将字符进行大小写
    2019-02-06
  • Nginx代理时header头中带"_"信息丢失问题的解决

    Nginx代理时header头中带"_"信息丢失问题的解决

    前言 开发网关项目时,在请求时往请求头header中放入了签名sign_key信息,在接收请求时再从header中拿出,在本地调试时是可以的,但上线之后通过Nginx代理之后
    2019-02-06
  • Python实现E-Mail收集插件实例教程

    Python实现E-Mail收集插件实例教程

    __import__函数 我们都知道import是导入模块的,但是其实import实际上是使用builtin函数import来工作的。在一些程序中,我们可以动态去调用函数,如果我们
    2019-02-06
  • C++类中的特殊成员函数示例详解

    C++类中的特殊成员函数示例详解

    前言 C++类中有几个特殊的非静态成员函数,当用户未定义这些函数时,编译器将给出默认实现。C++11前有四个特殊函数,C++11引入移动语义特性,增加了两个参数为
    2019-02-06

最新评论