快捷導(dǎo)航

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

更新時(shí)間：2020年02月20日 08:32:20 作者：Vam的金豆之路

這篇文章主要介紹了一篇文章帶你淺入webpack的DLL優(yōu)化打包,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、前言

我們?cè)谑褂玫谌桨臅r(shí)候，一般內(nèi)部的代碼都不會(huì)變，但是當(dāng)webpack打包的時(shí)候，還是回去處理第三方包。我們是否可以利用一些方法來改進(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": "",
 "license": "ISC",
 "devDependencies": {
  "webpack": "^4.41.5"
 }
}

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

<html>
<head>
 <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--導(dǎo)入 Webpack 輸出的 JavaScript 文件-->
<script src="./dist/bundle.js"></script>
</body>
</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)搭建完成了，我們來打包一下。

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'] // 第三方庫
  },
  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": "",
 "license": "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、打包