Open cisen opened 5 years ago
webpack.DllPlugin webpack.DllReferencePlugin
"dll_react": {
"react": true,
"react-dom": true,
"react-image-crop": true,
"react-loadable": true,
"react-redux": true,
"react-resizable": true,
"react-router-dom": true,
"react-spring": true,
"react-transition-group": true,
"redux": true,
"redux-saga": true,
"classnames": true
},
"dll_ui_three": {
"antd": true,
"rc-menu": true,
"rc-table": true
},
"dll_ui": {
"germa-pc": false
},
"dll_common": {
"lodash": true,
"dva": true,
"dva-loading": true,
"axios": true,
"moment": true,
"seamless-immutable": true
},
"dll_ui_exp": {
"history": true,
"path-to-regexp": true,
"query-string-es3": true,
"noform": true
},
"dll_env": {
"babel-polyfill": true,
"cached-bind": true,
"core-decorators": true,
"dom-closest": true,
"raf": true,
"@ircloud/algorithm-shim": true
},
"dll_dev": {
"prop-types": true,
"warning": true
},
"dependencies": {
"@ircloud/algorithm-shim": "^0.0.7",
"antd": "3.9.2",
"axios": "^0.16.2",
"babel-polyfill": "^6.26.0",
"cached-bind": "^1.1.0",
"classnames": "^2.2.5",
"core-decorators": "^0.20.0",
"cross-env": "^5.2.0",
"dom-closest": "^0.2.0",
"dva": "^2.5.0-beta.2",
"dva-loading": "^0.2.1",
"germa-pc": "^0.0.59",
"history": "^4.7.2",
"lint-staged": "^8.1.0",
"lodash": "^4.17.4",
"moment": "^2.22.2",
"noform": "^1.1.8",
"normalize.css.less": "^3.0.3",
"path-to-regexp": "1.7.0",
"prop-types": "^15.5.8",
"pure-render-decorator": "^1.2.1",
"query-string-es3": "^0.0.8",
"raf": "^3.4.0",
"rc-menu": "^7.4.8",
"rc-table": "^6.3.4",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-image-crop": "^6.0.11",
"react-loadable": "^5.5.0",
"react-redux": "^5.0.4",
"react-resizable": "^1.7.5",
"react-router-dom": "^4.3.1",
"react-spring": "^6.1.10",
"react-transition-group": "^2.4.0",
"redux": "^4.0.1",
"redux-saga": "^0.16.2",
"remove-strict-webpack-plugin": "^0.1.2",
"seamless-immutable": "^7.1.2",
"styled-components": "^4.1.3",
"warning": "^4.0.2"
}
https://segmentfault.com/a/1190000012925212 http://webpack.wuhaolin.cn/4%E4%BC%98%E5%8C%96/4-2%E4%BD%BF%E7%94%A8DllPlugin.html webpack在build包的时候,有时候会遇到打包时间很长的问题,这里提供了一个解决方案,让打包如丝般顺滑~
1. 介绍
在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 react,lodash,vue 我们希望能和自己的代码分离开,Webpack 社区有两种方案
对于 CommonsChunkPlugin,webpack 每次打包实际还是需要去处理这些第三方库,只是打包完之后,能把第三方库和我们自己的代码分开。而 DLLPlugin 则是能把第三方代码完全分离开,即每次只打包项目自身的代码。Dll这个概念是借鉴了Windows系统的dll,一个dll包,就是一个纯纯的依赖库,它本身不能运行,是用来给你的app引用的。
2. 模板webpack-simple 用法
要使用 DLLPlugin,需要额外新建一个配置文件。所以对于用这种方式打包的项目,一般会有下面两个配置文件
在项目根目录新建一个文件 webpack.dll.config.js
这是把用到的第三方插件添加到 vendor 中。 然后在webpack.config.js中添加代码
再在入口html文件中引入 vendor.dll.js
然后在package.json文件中添加快捷命令(build:dll)
最后打包的时候首先执行npm run build:dll命令会在打包目录下生成 vendor-manifest.json 文件与 vendor.dll.js 文件。 打包dll的时候,Webpack会将所有包含的库做一个索引,写在一个manifest文件中,而引用dll的代码(dll user)在打包的时候,只需要读取这个manifest文件,就可以了。
再执行
npm run build
发现现在的webpack打包速度为2,3秒左右,与之前的20秒左右快了很多。webpack.dll.config.js
clipboard.png
内容:
建议加上代码压缩插件,否则dll包会比较大。
在
webpack.prod.conf.js
的 plugin 后面加入配置根目录下的入口 index.html 加入引用
package.json的script里加入快捷命令
要生成dll时运行npm run build:dll,即生成dist目录下两个文件 vender-manifest.json 与 vender.dll.js。 然后正式生成 prod npm run build:prod,即生成除webpack.dll.config.js中指定包之外的其他打包文件。
在尝试在 vue-element-admin 中引入 DllPlugin 时,加入20个打包项,测试结果: 原来的打包时间:
clipboard.png
引入 DllPlugin 后的打包时间:
clipboard.png
可以看到大幅缩短了打包时间~
// 配置externals之后,webpack不会把配置项中的代码打包进去,别忘了需要在外部引入cdn上的js文件
网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~