详解Webpack DLL用法以及功能

在使用webpack过程中，本人也发现发现构建速度非常慢，Webpack性能优化的方式有很多种，本文介绍了dll，dll是一种最简单粗暴并且极其有效的优化方式。

前言

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

  1. CommonsChunkPlugin
  2. DLLPlugin

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

用法

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

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

  • 详解Webpack DLL用法以及功能

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

  • 详解webpack 入门与解析

    每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化 安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行初始安装.详细参数:https://docs.npmjs.com/files/package.json. 不要y参数的话,会在命令框中设置各项参数,但

  • 详解C++ thread用法总结

    1,简介 C++11中加入了<thread>头文件,此头文件主要声明了std::thread线程类.C++11的标准类std::thread对线程进行了封装,定义了C++11标准中的一些表示线程的类.用于互斥访问的类与方法等.应用C++11中的std::thread便于多线程程序的移值. std::thread类成员函数: (1).get_id:获取线程ID,返回一个类型为std::thread::id的对象. (2).joinable:检查线程是否可被join.检查thread对象是否标识一

  • 详解Linux重定向用法

    相信大家平时都会有需要复制粘贴数据的时候,如果是打开文件进行复制粘贴,就不可避免的需要较多的鼠标与键盘的操作,就会比较繁琐.那么有没有可以省掉这些繁琐操作的复制粘贴的方法呢? 答案是肯定的,那就是重定向.重定向是一种高效的方法,无需大量的鼠标与键盘操作就可以完成数据的转移.重定向可以分为输入重定向以及输出重定向这两种类型.由于所有程序都有输入或者输出,因此输入和输出的重定向是任何编程语言或脚本语言都自带的功能. 每当你与计算机交互时,重定向就必然会发生.学会使用重定向,不仅可以让你与计算机更好地

  • R语言函数详解及实例用法

    函数是一组组合在一起以执行特定任务的语句. R 语言具有大量内置函数,用户可以创建自己的函数. 在R语言中,函数是一个对象,因此R语言解释器能够将控制传递给函数,以及函数完成动作所需的参数. 该函数依次执行其任务并将控制返回到解释器以及可以存储在其他对象中的任何结果. 函数定义 使用关键字函数创建 R 语言的函数. R 语言的函数定义的基本语法如下 function_name <- function(arg_1, arg_2, ...) { Function body } 函数组件 函数的不同部

  • Vue 详解mixins混入用法大全

    Vue 详解mixins混入用法大全

    目录 前言 一.什么是Mixins? 二.什么时候使用Mixins? 三.如何创建Mixins? 四.如何使用Mixins? 五.Mixins的特点 六.Mixins合并冲突 七.与vuex的区别 八.与公共组件的区别 前言 当我们的项目越来越大,我们会发现组件之间可能存在很多相似的功能,你在一遍又一遍的复制粘贴相同的代码段(data,method,watch.mounted等),如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixin

  • 一文详解webpack中loader与plugin的区别

    目录 一.Loader 1.loader的作用: 2.loader的工作原理: 3. Loader 执行顺序 4.如何开发一个loader 二.Plugin 1.plugin解决其他的更多的自动化打包工作 2.自定义插件 常见的Loader和Plugin loader: plugin: 一.Loader 1.loader的作用: webpack 只能直接处理 javascript 格式的代码.任何非 js 文件都必须被预先处理转换为 js 代码,才可以参与打包.loader(加载器)就是这样一个

  • 详解webpack之scss和postcss-loader的配置

    本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **

  • 详解webpack babel的配置

    Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: 使用基于JavvScript进行扩展语言,比如React的JSX: npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用 首先

  • 详解webpack 打包文件体积过大解决方案（code splitting）

    优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码 问题: 开发环境用webpack后发现单个js文件

随机推荐