Webpack打包慢问题的完美解决方法(2)

var webpack = require('webpack'); module.exports = { externals: { 'react': 'window.__LIB["react"]', 'react-addons-css-transition-group': 'window.__LIB["react-addons-css-transition-group"]', // 其它库 } //其它配置忽略...... };

这时由于 externals 的存在，Webpack 打包的时候就会避开这些模块超多，依赖关系复杂的库，把这些第三方 module 的入口指向预先打包好的 lib.js 的入口 window.__LIB，从而只打包我们的业务代码。

终极解决方法

上面我们提到的方法本质上就是一种动态链接库（dll）”的思想，这在 windows 系统下面是一种很常见的思想。一个dll包，就是一个很纯净的依赖库，它本身不能运行，是用来给你的 app 或者业务代码引用的。

同样的 Webpack 最近也新加入了这个功能：webpack.DllPlugin。使用这个功能需要把打包过程分成两步：

打包ddl包

引用ddl包，打包业务代码

首先我们来打包ddl包，首先配置一个这样的 ddl.config.js：

const webpack = require('webpack'); const vendors = [ 'react', 'react-dom', 'react-router', // ...其它库 ]; module.exports = { output: { path: 'build', filename: '[name].js', library: '[name]', }, entry: { "lib": vendors, }, plugins: [ new webpack.DllPlugin({ path: 'manifest.json', name: '[name]', context: __dirname, }), ], };

webpack.DllPlugin 的选项中：

path 是 manifest.json 文件的输出路径，这个文件会用于后续的业务代码打包；

name 是dll暴露的对象名，要跟 output.library 保持一致；

context 是解析包路径的上下文，这个要跟接下来配置的 webpack.config.js 一致。

运行Webpack，会输出两个文件一个是打包好的 lib.js，一个就是 manifest.json，它里面的内容大概是这样的：

{ "name": "vendor_ac51ba426d4f259b8b18", "content": { "./node_modules/react/react.js": 1, "./node_modules/react/lib/React.js": 2, "./node_modules/react/node_modules/object-assign/index.js": 3, "./node_modules/react/lib/ReactChildren.js": 4, "./node_modules/react/lib/PooledClass.js": 5, "./node_modules/react/lib/reactProdInvariant.js": 6, // ............ } }

接下来我们就可以快乐地打包业务代码啦，首先写好打包配置文件 webpack.config.js：

const webpack = require('webpack'); module.exports = { output: { path: 'build', filename: '[name].js', }, entry: { app: './src/index.js', }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./manifest.json'), }), ], };

webpack.DllReferencePlugin 的选项中：

context 需要跟之前保持一致，这个用来指导 Webpack 匹配 manifest 中库的路径；

manifest 用来引入刚才输出的 manifest.json 文件。

DllPlugin 本质上的做法和我们手动分离这些第三方库是一样的，但是对于包极多的应用来说，自动化明显加快了生产效率。

总结

以上就是关于彻底解决Webpack打包慢问题的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章: