Webpack DllPlugin 和 DllReferencePlugin

buildupchao 发布于2019-08-01 16:59 / 1486人阅读

摘要：没使用你会发现这个时候，和都非常的大，因为他们都了一个很大的包，而使用了，则将这个大包抽离出来成为一个。如果是在手机开发中，便可以将频繁修改的文件和不频繁修改的文件分离，这样每次更新只需要替换部分的包。

Webpack DllPlugin 和 DllReferencePlugin 1.插件的作用

是一种分包的解决方案，它可以将部分代码抽出来，多带带形成一个插件包，类似windows系统中的dll包.

2.插件的用途

因为插件的作用是分离代码，所以常用在代码中做公共代码的抽离，例如React中可以把公共的模块【react , react dom等等】

3.优势

1.你可以从你的application 中分离出一个library，当你使用webpack 的w --watch模式，那么你修改除了library以外的文件，将会非常的快速。

2.当用户修改代码，只需要修改他们所改变的部分，这对于热更新来说是件好事

3.可以将部分相同作用的包合并起来，方便维护开发

4.加载方式

使用dll：这个时候会多打一个library包，就是这里的Child vendor，他有738KB，
创建使用了1320ms

这里的主要文件则变的非常小，创建使用了237ms

当你修改了主要文件，那么你只需要重新编译主要文件中你修改的部分,这样会非常快，这里只使用15ms。

没使用dll：

你会发现这个时候，pageA和pageB都非常的大，因为他们都require了一个很大的包，
而使用了dll，则将这个大包抽离出来成为一个。创建使用了1412ms

这里仅仅修改一点东西，却发现要回重新编译739kb的东西，这里仅仅是一个小文件，如果是一个大文件，那么将会非常的耗时，这里使用了62ms，那么如果文件很大的情况，将会非常影响build的速度。

上图中，使用dll，那么他会将一些不需要频繁修改的文件编译成一个library包，那么所有使用到该library的文件大小都会大幅度的下降，之后修改文件后的编译速度将会非常的快。
如果是在手机app开发中，便可以将频繁修改的文件和不频繁修改的文件分离，这样每次更新只需要替换部分的包。

5.代码实现

源码地址

文件目录

|-dist
|--dll
|---生成文件的位置
|-pageA.js
|-pageB.js
|-pageC.js
|-vendor.js
|-vendor2.js
|-webpack.config.dll.js
|-package.json

/* eslint import/no-extraneous-dependencies: ["off"] */
const path = require("path");
const webpack = require("webpack");

// 文件的输出目录
const STATIC_SRC = "dist";
// 文件输出的文件夹
const OUTPUT_PATH = "dll";
// 控制是否开启分离模式


const main = [
  {
    name: "vendor",
    // 这里是需要打包成library包的文件入口
    entry: [
      "./vendor.js", "./vendor2.js", "react", "react-dom"
    ],
    // 打包后的输出位置和输出名字
    output: {
      path: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH),
      filename: "vendor.js",
      library: "vendor_[hash]"
    },
    plugins: [new webpack.DllPlugin({
      name: "vendor_[hash]",
      //这里的文件输出文件需要和DllReferencePlugin保持一致
      path: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH, "manifest.json")
    })],
  },
  {
    name: "app",
    dependencies: ["vendor"],
    entry: {
      pageA: "./pageA",
      pageB: "./pageB",
      pageC: "./pageC"
    },
    output: {
      path: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH),
      filename: "[name].js"
    },
    plugins:  [ new webpack.DllReferencePlugin({
      // 这里需要保证路径与DllPlugin中生成的manifest路径一致，否则报错
      manifest: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH, "manifest.json")
    })]
  }
];
module.exports = main;

参考

Optimizing Webpack build times and improving caching with DLL bundles

webpack 官方文档

服务器托管超融合服务器 DllReferencePlugin DllPlugin webpack _webpack

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50873.html

webpack的DllPlugin和DllReferencePlugin插件的简单使用总结

摘要：今天就来简单讲讲它们的使用。这个插件的作用是创建文件和文件。使用其他的脚手架需要根据具体情况考虑。不要使用，否则在运行时会报错误。的和的要保持一致。这段时间在对公司的打包构建速度和app.js文件大小进行优化。使用到了webpack的DllPlugin和DllReferencePlugin。今天就来简单讲讲它们的使用。其实对于这两个插件网上已经有很多各种各样的文章了。不过笔者认为，...

wushuiyong 2019-08-22 18:31 评论0 收藏0
Webpack DllPlugin 和 DllReferencePlugin

摘要：没使用你会发现这个时候，和都非常的大，因为他们都了一个很大的包，而使用了，则将这个大包抽离出来成为一个。如果是在手机开发中，便可以将频繁修改的文件和不频繁修改的文件分离，这样每次更新只需要替换部分的包。 Webpack DllPlugin 和 DllReferencePlugin 1.插件的作用是一种分包的解决方案，它可以将部分代码抽出来，单独形成一个插件包，类似windows系统中...

thekingisalwaysluc 2019-08-21 11:43 评论0 收藏0
webpack多页应用架构系列（十一）：预打包Dll，实现webpack音速编译

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里前言书承上文多页应用架构系列十如何打造一个自定义的。终于，发现了这一大杀器，打包时间过长的问题得到完美解决。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000710437...

sixleaves 2019-08-20 11:33 评论0 收藏0
webpack使用-详解DllPlugin

摘要：前言时光飞逝，转眼又偷懒了一个多月什么是文件为动态链接库文件在中，许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库，即文件，放置于系统中。前言（时光飞逝，转眼又偷懒了一个多月）什么是DLL DLL(Dynamic Link Library)文件为动态链接库文件,在Windows中，许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链...

KunMinX 2019-08-23 12:12 评论0 收藏0
webpack开发环境配置

摘要：本次的重点主要集中在开发环境上，生产环境则是使用的默认模式。开发环境开发环境没什么好说的了，简单易配置，官网很详细。日常吐槽经过不断的调整和测试，关于 react 的 webpack 配置终于新鲜出炉。本次的重点主要集中在开发环境上，生产环境则是使用 webpack 的 production 默认模式。本次配置主要有： eslint+prettier; optimizati...

FuisonDesign 2019-08-23 18:14 评论0 收藏0