webpack编译提速：使用externals和DllPlugin

本文提供使用externals和DllPlugin优化webpack编译的大体思路，它们的基本思想是将依赖的框架等模块从构建过程中移除，进而提高打包速度以及减小打包产物的体积，具体的操作可以自行查阅。

通过webpack-bundle-analyzer插件查看webpack项目打包的结果（插件的使用方式见这：Webpack Bundle Analyzer）：

鼠标悬停浏览器左侧还可以看到各个包的具体大小以及一些选项：

从可视化树图中我们可以清晰地看出各个模块打包结果，那么我们就可以抓主要矛盾处理：发现userCenter.bundle.js包体积最大，那就拿他来开刀。

原始未优化（userCenter.bundle.js：7.55 MB)：

可以看到ag-grid-community和BizChats.js这两个第三方库所占体积较大，每次构建都将它们打包进去是不合理的。

我们通过webpack的externals配置项从输出的 bundle 中排除排除对ag-grid-community的依赖（配置方式见：externals），简而言之，就是以下：

配置webpack.config.js文件：externals : { 'ag-grid-community': 'agGrid' }
在自己的html页面添加对应包的script标签将包导入：例如在开发环境中
```
<script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.js"></script>
```

打包后(userCenter.bundle.js:5.84 MB，减少22.6%):

这里我们已经将ag-grid-community包从bundle中移除，接着继续处理BizChats.js。

通过DllPlugin（配置方式见这里：DllPlugin）单独打包bizcharts。webpack dll配置文件的一个例子，具体如下：

配置webpack.dev.dll.config.js文件用于打包外部库（DllPlugin插件会生成一个名为 manifest.json 的文件，这个文件是用于让 DllReferencePlugin插件能够映射到相应的依赖上）：

const webpack = require('webpack');
const path = require('path')
module.exports = {entry: {"vendor" : ['es6-promise','whatwg-fetch','classnames','moment','core-js/es6/map','core-js/es6/set','raf/polyfill','react','react-dom','bizcharts']},mode : 'development',resolve: {modules: [path.join(__dirname, "src"), "node_modules"]},output: {path: path.join(__dirname, './dlls'),filename: '[name].js',library: '[name]'},plugins: [new webpack.DllPlugin({path: path.join(__dirname, './dlls/[name].json'),name: '[name]'})]
};

在package.json中添加scripts：

 "dll": "cross-env NODE_ENV=development webpack --config webpack.dev.dll.config.js",

在项目打包的webpack配置文件中的plugins配置项添加DllReferencePlugin插件：

plugins: [new webpack.DllReferencePlugin({context: __dirname,manifest: require('./dlls/vendor.json'),})
],

再运行npm脚本npm run dll，即可生成我们的打包产物
正常启动项目即可。

打包后（userCenter.bundle.js：4.31 MB，减少20.3%）：

经过这两次第三方库的抽离，userCenter.bundle.js模块从7.55M降低到4.31M，缩减了42.9%，项目整体从39.24M降低到34.3M，缩减了12.9%，效果还是立竿见影的。其他模块需要处理的话，同理。

Webpack 配置中的 externals 和 DllPlugin 解决的是同一类问题：将依赖的框架等模块从构建过程中移除。它们的区别在于：
6. 在 Webpack 的配置方面，externals 更简单，而 DllPlugin 需要独立的配置文件。
7. DllPlugin 包含了依赖包的独立构建流程，而 externals 配置中不包含依赖框架的生成方式，通常使用已传入 CDN 的依赖包。
8. externals 配置的依赖包需要单独指定依赖模块的加载方式：全局对象、CommonJS、AMD 等。
9. 在引用依赖包的子模块时，DllPlugin 无须更改，而 externals 则会将子模块打入项目包中。

webpack编译提速：使用externals和DllPlugin相关推荐

webpack编译时No PostCSS Config的解决方法
1. {loader:"postcss-loader",options: { // 如果没有options这个选项将会报错 No PostCSS Config foundplugi ...
vue中webpack编译打包使用之Vue知识点归纳(十一)
本文中将描述 webpack 简述 webpack 项目的初始化配置 webpack 打包运行一个 vue 项目 1 什么是webpack,到底需要解决什么问题近几年前端的快速发展,前端已不是简单的 ...
关于webpack编译scss文件
css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录 ...
webpack 编译stylus_webpack 文档更新日志（9.129.29）
久等了,本应上周五发的更新日志,现在才来.话不多说,开始正题. 英文篇内容更新 API loader 中移除了对 this.exec 的说明 module-methods 中新增了 webpack ...
webpack 编译stylus_webpack 文档更新日志（9.12-9.29）
久等了,本应上周五发的更新日志,现在才来.话不多说,开始正题. 英文篇内容更新 API loader 中移除了对 this.exec 的说明 module-methods 中新增了 webpack ...
webpack 编译html模板文件
1.项目结构安装loader: npm i html-loader --save-dev npm i ejs-loader --save-dev 2.模板文件layer.html <div c ...
webpack编译过程
webpack的作用是将源代码编译(构建.打包)成最终代码.整个过程大致分为三个步骤:初始化.编译.输出. 1.初始化在该阶段,webpack会将CLI参数.配置文件.默认配置进行融合,形成一个最终 ...
windows 编译 caffe unresolved externals 问题
windows 10 编译基于 caffe 的工程, 由于github上作者所用到的版本各不相同,版本是导致问题的根本. 遇到 LNK20xx error unresolved externals,先 ...
webpack 编译完成执行代码
接收一个项目,由于目录结构的问题,每次编译完成后就需要去修改编译后的 HTML 文件中引用的其它文件的路径. 所以想在编译完成后使用 node 来操作文件修改路径. 然后在 webpack 官网找到了 ...

webpack编译提速：使用externals和DllPlugin

webpack编译提速：使用externals和DllPlugin相关推荐

最新文章

热门文章