webpack实践——DLLPlugin 和 DLLReferencePlugin的使用
2024-09-04 21:02:33
DLLPlugin 和 DLLReferencePlugin的使用
DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度。
1.首先build文件夹添加----webpack.dll.config.js:
var path = require("path");
var webpack = require("webpack");
module.exports = {
// 要打包的模块的数组
entry: {
vendor: ['vue/dist/vue.esm.js','vue-router']
},
output: {
path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
filename: '[name].dll.js',// vendor.dll.js中暴露出的全局变量名。
library: '[name]_library' // 与webpack.DllPlugin中的`name: '[name]_library',`保持一致。
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
]
};
2.在package.json的scripts里加上:
"dll": "webpack --config build/webpack.dll.config.js",
3.运行npm run dll 在static/js下生成vendor-manifest.json;
4.在build/webpack.base.conf.js里加上:
// 添加DllReferencePlugin插件
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
})
],
5.然后在index.html中引入vendor.dll.js:
<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>
至此,配置之后的:
可以看到npm run build后的时间大幅度减少,在dist打包体积上也比之前的小。在项目优化中,可以很大程度上加快项目的构建速度和减少项目的打包体积。
最新文章
- webSocket and LKDBHelper的使用说明
- C语言 &#183; 求矩阵各个元素的和
- 你好,欢迎来到我的博客,我是博主royalmice1
- SVN中trunk、branches、tags用法详解
- bzoj 1951 [Sdoi2010]古代猪文(数论知识)
- 关于VerilogHDL生成的锁存器
- php强制下载文件并显示原始文件名
- 音乐API
- mysql触发器new和old
- 远程连接你的linux服务器
- EasyUI combogrid/combobox过滤时限制只能选择现有项
- 使用Docker镜像
- Hadoop 系列(一)基本概念
- js 和 css 中 不能使用 jsp 页面中一些 标签 和 java 代码等,应注意
- android toast使用方法
- kafka可靠性
- ZOJ 3630 Information 强连通
- Apache Tez 了解
- StringBuilder String string.Concat 字符串拼接速度
- php写入、追加写入文件的实例