把html压缩成dll,一篇文章带你浅入webpack的DLL优化打包
一、前言
我们在使用第三方包的时候,一般内部的代码都不会变,但是当webpack打包的时候,还是回去处理第三方包。我们是否可以利用一些方法来改进呢?我们可以先对第三方包处理,然后再打包。
二、实战
1、初始化
npm init
2、局部安装webpack
npm i -D webpack
3、编辑package.json
加入一行代码,方便运行命令,
"start": "webpack --config webpack.config.js"
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.5"
}
}
4、创建index.html
5、创建main.js,引入第三方包
import $ from 'jquery';
console.log($);
6、创建webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
// JavaScript 执行入口文件
entry: './main.js',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
},
plugins:[]
};
这样,我们的基础项目已经搭建完成了,我们来打包一下。
npm run start
时间:943ms
下面,我们使用DLL优化一下。
1、创建webpack.dll.js
使用插件webpack.DllPlugin
const webpack=require('webpack');
module.exports={
entry:{
vendor:['jquery'] // 第三方库
},
output:{
path:__dirname+"/dll",
filename:'[name].dll.js',
library:'[name]_library'
},
plugins:[
new webpack.DllPlugin({
path:__dirname+'/dll/[name]-menifest.json',
name:'[name]_library'
})
]
}
2、运行一下webpack.dll.js
编辑一下package.json,加入一行"dll": "webpack --config webpack.dll.js",方便运行。
{
"name": "webpack_p",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config webpack.config.js",
"dll": "webpack --config webpack.dll.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
}
}
运行命令
npm run dll
3、编辑webpack.config.js
使用插件webpack.DllReferencePlugin
const path = require('path');
const webpack = require('webpack');
module.exports = {
// JavaScript 执行入口文件
entry: './main.js',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
},
plugins:[
new webpack.DllReferencePlugin({
manifest: require('./dll/vendor-menifest.json')
})
]
};
4、打包
npm run start
时间:473ms
优化完毕。
三、结语
webpack优化有很多,我将会不断更新,谢谢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
把html压缩成dll,一篇文章带你浅入webpack的DLL优化打包相关推荐
- 一篇文章带你搞懂慢SQL以及优化的策略
文章目录 一.什么是慢SQL ? 二.为什么要对慢SQL进行优化? 三.数据库性能 1. 最大数据量 2. 最大并发数 3. 查询耗时0.5秒 4. 具体实施 四.数据库表的设计 1. 数据类型 2. ...
- 一篇文章带你详解 HTTP 协议(下)
文章目录,方便阅读: 一.概述(已讲) 二.HTTP 工作过程(已讲) 三.HTTP 协议基础(已讲) 四.HTTP 协议报文结构(已讲) 五.HTTP 报文首部之请求行.状态行(已讲) 六.HTTP ...
- 一篇文章带你详解 HTTP 协议
一篇文章带你详解 HTTP 协议 本篇文章篇幅比较长,先来个思维导图预览一下. 一张图带你看完本篇文章 一.概述 1.计算机网络体系结构分层 计算机网络体系结构分层 2.TCP/IP 通信传输流 利用 ...
- 借重新装系统之际,一篇文章带你玩透Windows 10从系统安装到软件选择
系统安装所需软件 Rufus 一个制作USB-ISO的免费软件,比微软官方工具好的地方在于除了可以制作windows 系统U盘,还可以制作linux 以及安卓X86的系统安装光盘. 借重新装系统之际, ...
- 一篇文章带你搞懂网络层(网际层)-- 地址篇
网络层(Network Layer)是OSI模型中的第三层(TCP/IP模型中的网际层),提供路由和寻址的功能,使两终端系统能够互连且决定最佳路径,并具有一定的拥塞控制和流量控制的能力.相当于发送邮件 ...
- 简书大佬的笔记:一篇文章带你详解 HTTP 协议(网络协议篇一)
一篇文章带你详解 HTTP 协议(网络协议篇一) 本篇文章篇幅比较长,先来个思维导图预览一下. 一张图带你看完本篇文章 一.概述 1.计算机网络体系结构分层 计算机网络体系结构分层 2.TCP/IP ...
- osgb转json_超实用:一篇文章带你了解市面上主流通用的3D模型格式
原标题:超实用:一篇文章带你了解市面上主流通用的3D模型格式 3D模型格式知多少 说到格式,相信大家都不陌生. 随着互联网的普及,我们几乎每天都会和不同的格式打交道,文本的TXT.图片的JPG.视频的 ...
- 一篇文章带你了解Flannel
from: http://dockone.io/article/618 DockOne技术分享(十八):一篇文章带你了解Flannel [编者的话]Flannel是 CoreOS 团队针对 Kuber ...
- 一篇文章带你详解 TCP/IP 协议(下)
前面的第一二三章已在上篇讲解,还没看过的可以先看看:一篇文章带你详解 TCP/IP 协议(上) 本文继续讲解第四章. 四.网络层中的 IP 协议 IP(IPv4.IPv6)相当于 OSI 参考模型中的 ...
最新文章
- 各种好的开源项目-转载
- C#中运行命令行截取输出流的例子
- Python2和Python3除法差别
- Ollydbg使用教程学习总结(一)
- datatables隐藏列设置及获取隐藏列的值
- 前端学习(2181):vue-router导航守卫的补充
- (128)FPGA面试题-用一个二选一的MUX和一个非门实现异或
- FD.io VPP startup.conf配置文件示例:安装后第一次配置
- c语言入口参数和出口参数,麻烦帮忙指出一下这个函数的入口参数和出口参数呀!...
- @程序员,快收下这份比特币“勒索病毒”应对须知!
- iOS 图片拉伸、拉伸两端保留中间
- 基于Astar算法实现飞行轨迹的三维规划附Matlab代码
- 中国电子学会-全国青少年无人机技术等级考试标准 (1-2级)
- iOS OC消除黄色警告⚠️ (不断的更新中...)
- 记 PS2020 打开闪退问题
- 云计算作者姚宏宇1月26日中关村图书大厦讲座
- 学习使用 Clion 第一次使用Clion开发Qt的hello world
- 翼方健数CEO罗震——推动区域级数据互联互通的先行者
- 数据结构之堆(Heap)及其用途
- 数学界的扫地僧们(转载)
热门文章
- C/C++搞不懂指针还是数组?用sizeof解释struct大小!
- GTK实现:俄罗斯方块小游戏源代码(RussiaCube.c)
- java定时器每一分钟执行一次_2行代码搞定一个定时器
- flask mysql 配置文件_flask配置文件的几种方法
- VUE3模板ref引用子组件或者子组件的方法
- Java的jvm原理和常识
- centos内核错误_centos 升级内核失败回救
- properties 配置回车_Dell?H730P?Raid1?配置方法
- git pull git add git commit git branch git更新代码git提交git分支管理
- 使用Swagger,ApiExplorer和NSwag掌握ASP.NET Core和ABP中的外部Web API