一篇文章带你浅入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 相关文章推荐
JavaScript Date对象 日期获取函数
Dec 19 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
简单分析js中的this的原理
Aug 31 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 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生成与读取excel文件
2016/10/14 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python中去空格函数的用法
2014/08/21 Python
Python正规则表达式学习指南
2016/08/02 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
python代码xml转txt实例
2020/03/10 Python
python时间time模块处理大全
2020/10/25 Python
django中cookiecutter的使用教程
2020/12/03 Python
耐克亚太地区:Nike APAC
2019/12/07 全球购物
护士的自我鉴定
2014/02/07 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
新学期感想
2015/08/10 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers