Webpack性能优化 DLL 用法详解

前言

在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react，lodash，我们希望能和自己的代码分离开，Webpack 社区有两种方案

  • CommonsChunkPlugin
  • DLLPlugin

对于 CommonsChunkPlugin，webpack 每次打包实际还是需要去处理这些第三方库，只是打包完之后，能把第三方库和我们自己的代码分开。而DLLPlugin 则是能把第三方代码完全分离开，即每次只打包项目自身的代码。

用法

要使用 DLLPlugin，需要额外新建一个配置文件。所以对于用这种方式打包的项目，一般会有下面两个配置文件

  • webpack.config.js
  • webpack.dll.config.js

先来看下 webpack.dll.config.js

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')

module.exports = {
 entry: {
 vendors: ['react', 'lodash']
 },

 output: {
 filename: '[name].dll.js',
 path: 'dist/',
 library
 },

 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, 'dist/[name]-manifest.json'),
  // This must match the output.library option above
  name: library
 }),
 ],
}

再改下 webpack.config.js 文件

const webpack = require('webpack')

module.exports = {
 entry: {
 app: './src/index'
 },
 output: {
 filename: 'app.bundle.js',
 path: 'dist/',
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendors-manifest.json')
 })
 ]
}

manifest: require('./dist/vendors-manifest.json') 这里的路径要和 webpack.dll.config.js 里面的对应。

然后运行

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

然后你的 html 文件像下面这样引用

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

DLL Link Plugin

上面的用法也存在一些不方便的地方，比如在 webpack.config.js 中要明确指出对应的 manifest.json 文件。还有当 DLL 需要更新的时候，比如 react 升级了，或者加入新的第三方库，都需要手动像下面这样编译一次。

$ webpack --config webpack.dll.config.js

因为上面这些问题，所以基于官方的 DllReferencePlugin，我写了一个打包的插件，Dll Link Plugin。

使用这个插件，只需要对 webpack.config.js 作下小小的改动

const webpack = require('webpack')
const DllLinkPlugin = require('dll-link-webpack-plugin')

module.exports = {
 // ...
 plugins: [
 new DllLinkPlugin({
  config: require('webpack.dll.config.js')
 })
 ]
}

直接替换掉 DllReferencePlugin，然后传入对应的 DLL 配置文件就可以了。每次打包的时候，只需要运行

$ webpack --config webpack.config.js

上面的命令便会自动生成对应的 vendors 文件，需要更新的时候，也会自动更新。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解webpack性能优化——DLL

    详解webpack性能优化——DLL

    Webpack性能优化的方式有很多种,本文之所以将 dll 单独讲解,是因为 dll 是一种最简单粗暴并且极其有效的优化方式. 在通常的打包过程中,你所引用的诸如:jquery.bootstrap.react.react-router.redux.antd.vue.vue-router.vuex 等等众多库也会被打包进 bundle 文件中.由于这些库的内容基本不会发生改变,每次打包加入它们无疑是一种巨大的性能浪费. Dll 的技术就是在第一次时将所有引入的库打包成一个 dll.js 的文件,将

  • 详解Webpack DLL用法以及功能

    在使用webpack过程中,本人也发现发现构建速度非常慢,Webpack性能优化的方式有很多种,本文介绍了dll,dll是一种最简单粗暴并且极其有效的优化方式. 前言 在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 react,lodash,我们希望能和自己的代码分离开,Webpack 社区有两种方案 CommonsChunkPlugin DLLPlugin 对于 CommonsChunkPlugin,webpack 每次打包实际还是需要去处理这些第三方库,只是打包完之后,

  • Webpack性能优化 DLL 用法详解

    前言 在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 react,lodash,我们希望能和自己的代码分离开,Webpack 社区有两种方案 CommonsChunkPlugin DLLPlugin 对于 CommonsChunkPlugin,webpack 每次打包实际还是需要去处理这些第三方库,只是打包完之后,能把第三方库和我们自己的代码分开.而DLLPlugin 则是能把第三方代码完全分离开,即每次只打包项目自身的代码. 用法 要使用 DLLPlugin,需要额外新建

  • IntelliJ IDEA 性能优化的教程详解

    idea打开的多了 内存占用也就多了 下边是亲试的优化ide性能的方法 1.设置JVM的启动参数: 进入idea的安装目录的bin文件夹 打开 idea.exe.vmoptions 文件, 修改-Xmx 的 值为2048m 打开 idea64.exe.vmoptions 文件, 修改-Xmx 的 值为2048m 打开idea.properties文件,找到idea.max.intellisense.filesize,默认是2500,改为25000(数值仅供参考,具体数值根据自己文件大小来定) 参

  • 脚手架vue-cli工程webpack的基本用法详解

    webpack的打包依赖于它的一个重要配置文件webpack.config.js,在这个配置文件中就可以指定所有在源代码编译过程中的工作了,就一个配置就可以与冗长的Gruntfile或者Gulpfile说再见了. 一个完整的工程项目中的webpack的配置远远没有这么简单,随着工程的构建要求的增加,webpack.config.js内的配置项目也会随之增加,webpack还有许许多多的选项提供给我们进行灵活配置,它只是一个构建工具,我们只需要了解在Vue项目中它基本能为我们做到的工作.最小化的配

  • MySQL两种临时表的用法详解

    外部临时表 通过CREATE TEMPORARY TABLE 创建的临时表,这种临时表称为外部临时表.这种临时表只对当前用户可见,当前会话结束的时候,该临时表会自动关闭.这种临时表的命名与非临时表可以同名(同名后非临时表将对当前会话不可见,直到临时表被删除). 内部临时表 内部临时表是一种特殊轻量级的临时表,用来进行性能优化.这种临时表会被MySQL自动创建并用来存储某些操作的中间结果.这些操作可能包括在优化阶段或者执行阶段.这种内部表对用户来说是不可见的,但是通过EXPLAIN或者SHOW S

  • Java switch关键字原理及用法详解

    这篇文章主要介绍了Java中 switch关键原理及用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Switch语法 switch作为Java内置关键字,却在项目中真正使用的比较少.关于switch,还是有那么一些奥秘的. 要什么switch,我有if-else 确实,项目中使用switch比较少的一个主要原因就在于它的作用能被if-else代替,况且switch对类型的限制,也阻碍了switch的进一步使用. 先看看switch的语法

  • Java开发中synchronized的定义及用法详解

    概念 是利用锁的机制来实现同步的. 互斥性:即在同一时间只允许一个线程持有某个对象锁,通过这种特性来实现多线程中的协调机制,这样在同一时间只有一个线程对需同步的代码块(复合操作)进行访问.互斥性我们也往往称为操作的原子性. 可见性:必须确保在锁被释放之前,对共享变量所做的修改,对于随后获得该锁的另一个线程是可见的(即在获得锁时应获得最新共享变量的值),否则另一个线程可能是在本地缓存的某个副本上继续操作从而引起不一致. 用法 修饰静态方法: //同步静态方法 public synchronized

  • MySQL Innodb 存储结构 和 存储Null值 用法详解

    背景: 表空间:INNODB 所有数据都存在表空间当中(共享表空间),要是开启innodb_file_per_table,则每张表的数据会存到单独的一个表空间内(独享表空间). 独享表空间包括:数据,索引,插入缓存,数据字典.共享表空间包括:Undo信息(不会回收<物理空间上>),双写缓存信息,事务信息等. 段(segment):组成表空间,有区组成. 区(extent):有64个连续的页组成.每个页16K,总共1M.对于大的数据段,每次最后可申请4个区. 页(page):是INNODB 磁盘

  • Javassist用法详解

    概述 Java字节码以二进制的形式存储在.class文件中,每一个.class文件包含一个Java类或接口.Javaassist就是一个用来处理Java字节码的类库.它可以在一个已经编译好的类中添加新的方法,或者是修改已有的方法,并且不需要对字节码方面有深入的了解.同时也可以通过完全手动的方式生成一个新的类对象. Maven依赖方式: <dependency> <groupId>org.javassist</groupId> <artifactId>java

  • C++ STL 四种智能指针的用法详解

    C++ STL 四种智能指针的用法详解

    0.前言 C++ 标准模板库 STL(Standard Template Library) 一共给我们提供了四种智能指针:auto_ptr.unique_ptr.shared_ptr 和 weak_ptr,其中 auto_ptr 是 C++98 提出的,C++11 已将其摒弃,并提出了 unique_ptr 替代 auto_ptr.虽然 auto_ptr 已被摒弃,但在实际项目中仍可使用,但建议使用更加安全的 unique_ptr,后文会详细叙述.shared_ptr 和 weak_ptr 则是

随机推荐