一篇文章带你浅入webpack的DLL优化打包


Posted in Javascript onFebruary 20, 2020

一、前言

我们在使用第三方包的时候,一般内部的代码都不会变,但是当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

<html>
<head>
 <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="./dist/bundle.js"></script>
</body>
</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

一篇文章带你浅入webpack的DLL优化打包

下面,我们使用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

一篇文章带你浅入webpack的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的DLL优化打包

三、结语

webpack优化有很多,我将会不断更新,谢谢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 #Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 #Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 #Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 #Javascript
详解Vue 单文件组件的三种写法
Feb 19 #Javascript
vue中 v-for循环的用法详解
Feb 19 #Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 #Javascript
You might like
php中处理模拟rewrite 效果
2006/12/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Django视图和URL配置详解
2018/01/31 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Python如何读取、写入JSON数据
2020/07/28 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
数控机械专业个人的自我评价
2014/01/02 职场文书
运动会通讯稿300字
2014/02/02 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
员工升职自荐信
2015/03/27 职场文书
酒店前台岗位职责
2015/04/16 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
JS数组去重详情
2021/11/07 Javascript
Ajax实现异步加载数据
2021/11/17 Javascript