脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack DLL打包

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

 更新时间：2020年02月20日 08:32:20   作者：Vam的金豆之路  
这篇文章主要介绍了一篇文章带你浅入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

<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

下面，我们使用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优化有很多，我将会不断更新，谢谢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS实现简单的二元方程计算器功能示例

    JS实现简单的二元方程计算器功能示例

    这篇文章主要介绍了JS实现简单的二元方程计算器功能,涉及javascript数学运算相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • React+Typescript实现倒计时Hook的方法

    React+Typescript实现倒计时Hook的方法

    本文主要介绍了React+Typescript实现倒计时Hook的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 一文教你用纯JS实现一个五子棋游戏

    一文教你用纯JS实现一个五子棋游戏

    实现一个五子棋游戏, 简要分析其原理, 页面并没有很花哨, 原理搞懂了, 后面的就是很轻松的事了,本文给大家介绍了如何用纯JS实现一个五子棋游戏,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2023-12-12
  • js如何删除对象/数组中null、undefined、空对象及空数组实例代码

    js如何删除对象/数组中null、undefined、空对象及空数组实例代码

    JS中数组是我们较为常用的一种数据结构,下面这篇文章主要给大家介绍了关于js如何删除对象/数组中null、undefined、空对象及空数组的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • js实现在文本框光标处添加字符的方法介绍

    js实现在文本框光标处添加字符的方法介绍

    在开发应用中，经常会遇到一些技术上的问题，比如：怎样让js在文本框光标处添加字符，本文将以此问题进行详细介绍，需要了解的朋友可以参考下
    2012-11-11
  • webpack的pitching loader详解

    webpack的pitching loader详解

    这篇文章主要介绍了webpack的pitching loader详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 利用Javascript实现BMI计算器

    利用Javascript实现BMI计算器

    BMI指数计算器相信大家都用过，那用JavaScript怎么实现呢？其实很简单，这篇文章给出了实例代码，有需要的可以参考学习。
    2016-08-08
  • JavaScript Accessor实现说明

    JavaScript Accessor实现说明

    关于Getter与Setter大家一定不会陌生,下面简单介绍几种我所知道的在JavaScript中实现G/S的方法.
    2010-12-12
  • 微信小程序自定义用户登录弹窗

    微信小程序自定义用户登录弹窗

    这篇文章主要为大家详细介绍了微信小程序自定义用户登录弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • javascript中搜索数组的四种方法示例详解

    javascript中搜索数组的四种方法示例详解

    我们在学到js中数组的时候,我们会接触到js中数组的一些方法这些方法对我们来说,可以很便利的达到我们想要的结果,下面这篇文章主要给大家介绍了关于javascript中搜索数组的四种方法,需要的朋友可以参考下
    2022-12-12

最新评论