一篇文章帶你淺入webpack的DLL優(yōu)化打包

一、前言

我們?cè)谑褂玫谌桨臅r(shí)候，一般內(nèi)部的代碼都不會(huì)變，但是當(dāng)webpack打包的時(shí)候，還是回去處理第三方包。我們是否可以利用一些方法來(lái)改進(jìn)呢？我們可以先對(duì)第三方包處理，然后再打包。
二、實(shí)戰(zhàn)
1、初始化

npm init

2、局部安裝webpack

npm i -D webpack

3、編輯package.json

加入一行代碼，方便運(yùn)行命令，
“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”: “”,
“l(fā)icense”: “ISC”,
“devDependencies”: {
“webpack”: “^4.41.5”
}
}

4、創(chuàng)建index.html

5、創(chuàng)建main.js，引入第三方包

import $ from ‘jquery’;
console.log($);

6、創(chuàng)建webpack.config.js

const path = require(‘path’);
const webpack = require(‘webpack’);
module.exports = {
// JavaScript 執(zhí)行入口文件
entry: ‘./main.js’,
output: {
// 把所有依賴的模塊合并輸出到一個(gè) bundle.js 文件
filename: ‘bundle.js’,
// 輸出文件都放到 dist 目錄下
path: path.resolve(__dirname, ‘./dist’),
},
plugins:[]
};

這樣，我們的基礎(chǔ)項(xiàng)目已經(jīng)搭建完成了，我們來(lái)打包一下。

npm run start

時(shí)間：943ms
在這里插入圖片描述

下面，我們使用DLL優(yōu)化一下。
1、創(chuàng)建webpack.dll.js

使用插件webpack.DllPlugin

const webpack=require(‘webpack’);
module.exports={
entry:{
vendor:[‘jquery’] // 第三方庫(kù)
},
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、運(yùn)行一下webpack.dll.js

編輯一下package.json，加入一行"dll": “webpack --config webpack.dll.js”，方便運(yùn)行。

{
“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”: “”,
“l(fā)icense”: “ISC”,
“devDependencies”: {
“webpack”: “^4.41.6”,
“webpack-cli”: “^3.3.11”
}
}

運(yùn)行命令

npm run dll

在這里插入圖片描述

3、編輯webpack.config.js

使用插件webpack.DllReferencePlugin

const path = require(‘path’);
const webpack = require(‘webpack’);
module.exports = {
// JavaScript 執(zhí)行入口文件
entry: ‘./main.js’,
output: {
// 把所有依賴的模塊合并輸出到一個(gè) 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

時(shí)間：473ms
優(yōu)化完畢。
在這里插入圖片描述

三、結(jié)語(yǔ)

webpack優(yōu)化有很多，我將會(huì)不斷更新，謝謝。






作者：Vam的金豆之路

主要領(lǐng)域：前端開(kāi)發(fā)

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路