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

2023-07-31 23:22:06 52

一、前言

我们在使用第三方包的时候，一般内部的代码都不会变，但是当webpack打包的时候，还是回去处理第三方包。我们是否可以利用一些方法来改进呢？我们可以先对第三方包处理，然后再打包。

二、实战

1、初始化

npminit

2、局部安装webpack

npmi-Dwebpack

3、编辑package.json

加入一行代码，方便运行命令，
"start":"webpack--configwebpack.config.js"

{
"name":"webpack_demo",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts":{
"test":"echo\"Error:notestspecified\"&&exit1",
"start":"webpack--configwebpack.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

constpath=require('path');
constwebpack=require('webpack');
module.exports={
//JavaScript执行入口文件
entry:'./main.js',
output:{
//把所有依赖的模块合并输出到一个bundle.js文件
filename:'bundle.js',
//输出文件都放到dist目录下
path:path.resolve(__dirname,'./dist'),
},
plugins:[]
};

这样，我们的基础项目已经搭建完成了，我们来打包一下。

npmrunstart

时间：943ms

下面，我们使用DLL优化一下。

1、创建webpack.dll.js

使用插件webpack.DllPlugin

constwebpack=require('webpack');
module.exports={
entry:{
vendor:['jquery']//第三方库
},
output:{
path:__dirname+"/dll",
filename:'[name].dll.js',
library:'[name]_library'
},
plugins:[
newwebpack.DllPlugin({
path:__dirname+'/dll/[name]-menifest.json',
name:'[name]_library'
})
]
}

2、运行一下webpack.dll.js

编辑一下package.json，加入一行"dll":"webpack--configwebpack.dll.js"，方便运行。

{
"name":"webpack_p",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts":{
"test":"echo\"Error:notestspecified\"&&exit1",
"start":"webpack--configwebpack.config.js",
"dll":"webpack--configwebpack.dll.js"
},
"author":"",
"license":"ISC",
"devDependencies":{
"webpack":"^4.41.6",
"webpack-cli":"^3.3.11"
}
}

运行命令

npmrundll

3、编辑webpack.config.js

使用插件webpack.DllReferencePlugin

constpath=require('path');
constwebpack=require('webpack');
module.exports={
//JavaScript执行入口文件
entry:'./main.js',
output:{
//把所有依赖的模块合并输出到一个bundle.js文件
filename:'bundle.js',
//输出文件都放到dist目录下
path:path.resolve(__dirname,'./dist'),
},
plugins:[
newwebpack.DllReferencePlugin({
manifest:require('./dll/vendor-menifest.json')
})
]
};

4、打包

npmrunstart

时间：473ms
优化完毕。

三、结语

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐