溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、前言
我們在使用第三方包的時候，一般內部的代碼都不會變，但是當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優化有很多，我將會不斷更新，謝謝。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
