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

网络编程 2024/12/24 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

一、前言

我们在使用第三方包的时候，一般内部的代码都不会变，但是当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="/UploadFiles/2021-04-02/bundle.js">

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优化有很多，我将会不断更新，谢谢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

webpack,DLL打包,webpack,DLL优化打包

标签：

webpack,DLL打包,webpack,DLL优化打包

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“一篇文章带你浅入webpack的DLL优化打包”

暂无一篇文章带你浅入webpack的DLL优化打包的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日

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

webpack,DLL打包,webpack,DLL优化打包

javaScript 实现重复输出给定的字符串的常用方法小结

浅析JS中NEW的实现原理及重写

评论“一篇文章带你浅入webpack的DLL优化打包”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接