上一節(jié)我們增加了一些高級特性的配置柴信，地址
這一節(jié)宽气，我們主要對構(gòu)建性能進(jìn)行優(yōu)化随常，绪氛，

首先燃逻，我們祭出構(gòu)建性能優(yōu)化最強(qiáng)的工具序目，DllReferencePlugin，DllPlugin姆怪，
這個(gè)插件的主要功能是嘿辟，對一些大的，不會經(jīng)常變動的包片效，進(jìn)行提前構(gòu)建红伦，打包出一個(gè)對某些模塊的映射文件和那些模塊的構(gòu)建結(jié)果，然后在我們開發(fā)構(gòu)建時(shí)淀衣，當(dāng)引入那些包時(shí)昙读，直接通過映射文件找到對應(yīng)的打包好的文件而不需要再次打包，大大降低了構(gòu)建速度膨桥，
簡單點(diǎn)說蛮浑，就是提前打包好部分文件唠叛，

當(dāng)你的項(xiàng)目依賴的變動小的文件很多時(shí)，這個(gè)方案可以是你的構(gòu)建速度提高幾個(gè)數(shù)量級沮稚，非常明顯艺沼，下面我們來介紹下插件的使用方法

這個(gè)插件是webpack自帶，不需要額外安裝蕴掏，我們先額外創(chuàng)建一個(gè)配置文件障般，用來作為提前構(gòu)建的配置文件，webpack.dll.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require("webpack")

module.exports = {
  entry: {
      vendor:[
          "vue",
          "vue-router"
      ]
    },
  output: {
    path: path.resolve(__dirname, 'static/js'),
    filename: '[name].dll.js',
    library:'[name]'
  },
  module:{
    rules:[
      {
        test: /\.vue$/,
        use:["vue-loader"]
      },
      {
        test:/\.js$/,
        use:["babel-loader"]
      },

    ],
  },
  plugins:[
    new VueLoaderPlugin(),
    new webpack.DllPlugin({
        path: path.join(__dirname, 'static/js', '[name]-manifest.json'),
        name:"[name]"
      })
  
  ]
}

需要提前構(gòu)建的包盛杰，都可以放在entry下vendor數(shù)組里挽荡，本例只引入了這兩個(gè)不需要變動的文件，順便貼下我們公司依賴的不需要變動文件

image.png

"dll": "webpack --config webpack.dll.js"

按照上方配置文件逗嫡，執(zhí)行npm run dll 打包出一個(gè)vendor.dll.js和vendor-manifest.json文件到static/js文件夾下青自。
這時(shí)候，提前打包的文件已經(jīng)打包好驱证，我們可以通過任何方法把它引入到html文件中性穿，我們通過最簡單的方式，直接通過script標(biāo)簽雷滚，提前把它引入到index.html中

<script src="./static/js/vendor.dll.js"></script>

提前打包的文件已經(jīng)打包好需曾，映射文件也已經(jīng)產(chǎn)生，這時(shí)祈远，我們需要到webpack構(gòu)建入口文件配置DllReferencePlugin插件來應(yīng)用配置文件從而略過對已打包文件的打包過程

new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require("./static/js/vendor-manifest.json"),
      })

配置完成呆万，
配置提前打包后，本例中车份，main.js大小為487kb谋减，構(gòu)建時(shí)間為2500ms，配置前main.js大小為790kb扫沼，構(gòu)建時(shí)間為3400ms出爹，可以看到，直接減少了一半的體積缎除，一半的時(shí)間严就，性能提升非常明顯。

接下來器罐，我們介紹提升構(gòu)建性能的第二個(gè)有力工具梢为，SplitChunksPlugin
在webpack4中，CommonsChunkPlugin已經(jīng)被移除，替換為SplitChunksPlugin铸董，這個(gè)插件可以用于多頁面應(yīng)用公共模塊的抽取和懶加載公共模塊的抽取祟印，本例中我們是一個(gè)單頁面應(yīng)用，但是用到了路由懶加載粟害，當(dāng)有很多路由時(shí)蕴忆，SplitChunksPlugin帶來的構(gòu)建性能的提升也是非常明顯的。
SplitChunksPlugin也是webpack4內(nèi)置的插件悲幅，

optimization: {
    splitChunks: {
      name:'common',
      minSize:1,
      minChunks:1,
      maxAsyncRequests:10,
      chunks:'async'
    },
  },

把chunks設(shè)置為async 表示只對懶加載的文件進(jìn)行分割套鹅，minSize表示進(jìn)行分割的最小體積，minChunks表示進(jìn)行分割的模塊最小引入次數(shù)夺艰，maxInitialRequests表示入口文件不能同時(shí)懶加載文件的最高數(shù)量，如果超過就不進(jìn)行分割沉衣，name表示分割后的名字郁副，

然后我們在本例中額外增加兩個(gè)懶加載路由

import VueRouter from "vue-router"

export default new VueRouter({
    routes:[
                {   
                    name:'routercomp',
                    path:'/',
                    component:() => import("../components/routercomp.vue")
                },
                {   
                    name:'routercomp2',
                    path:'/2',
                    component:() => import("../components/routercomp2.vue")
                },
                {   
                    name:'routercomp3',
                    path:'/3',
                    component:() => import("../components/rout.vue")
                }
            ]
})

每個(gè)路由都引入一個(gè)dict模塊中的a變量

dict.js

export   var a = 1

模塊routercomp.vue，其他模塊類似

import {a} from "../static/lib/dict.js"

三個(gè)模塊都引入了dict模塊中的a變量豌习，我們npm run dev進(jìn)行打包存谎，

image.png

可以看到，打包出五個(gè)js文件肥隆，包括三個(gè)懶加載的路由文件既荚，一個(gè)提取出的common文件，一個(gè)主入口main.js文件栋艳，三個(gè)路由文件中的公用模塊dict被打包到了common里恰聘，避免了每個(gè)路由都重復(fù)dict模塊，降低了最終文件的大小吸占，也降低了構(gòu)建的速度晴叨。

接下來我們介紹下多進(jìn)程打包

webpack4之前我們經(jīng)常使用happypack進(jìn)行多線程打包，充分利用多核cpu矾屯，然而兼蕊，happypack的維護(hù)者，已經(jīng)不在維護(hù)他件蚕，

Maintenance mode notice
My interest in the project is fading away mainly because I'm not using JavaScript as much as I was in the past. Additionally, Webpack's native performance is improving and (I hope) it will soon make this plugin unnecessary.
See the FAQ entry about Webpack 4 and thread-loader.
Contributions are always welcome. Changes I make from this point will be restricted to bug-fixing. If someone wants to take over, feel free to get in touch.
Thanks to everyone who used the library, contributed to it and helped in refining it!!!

并且孙技，在webpack4上使用happypack和作者推薦的thread-loader并沒有明顯的性能提升，所以這兩個(gè)插件大家慎用排作，（懷疑webpack4已經(jīng)內(nèi)置多線程牵啦，單為找到證據(jù)）

接下來我們介紹下對于一些耗時(shí)loader的優(yōu)化

首先是babel-loader非常耗時(shí)，因?yàn)闊o論是我們的工具js文件還是.vue中的script文件妄痪，最后都是會被babel-loader處理蕾久，所以對這個(gè)loader進(jìn)行優(yōu)化還是很有必要的，最簡單的優(yōu)化方式便是為babel-loader添加cacheDirectory屬性

{
        test:/\.js$/,
        use:["babel-loader?cacheDirectory=true"]
      },

添加緩存屬性后，babel-loader的處理速度能夠提高2倍僧著，在本例中履因，我們的啟動速度提高了兩倍以上。

對于其他的一些耗時(shí)loader我們可以使用cache-loader盹愚，對那些耗時(shí)loader進(jìn)行緩存處理栅迄，但是需要手寫對于緩存文件的讀寫，配置起來很麻煩皆怕，在本例中也沒有明顯性能提升毅舆，慎重使用。

最后介紹下webpack4 提供的模式配置

通過對mode的配置愈腾，webpack4會進(jìn)行一些內(nèi)置的優(yōu)化憋活，這也是在向配置簡單看齊，兩種模式webpack內(nèi)置的優(yōu)化如下

development
會將 process.env.NODE_ENV 的值設(shè)為 development虱黄。啟用 NamedChunksPlugin 和 NamedModulesPlugin悦即。

production
會將 process.env.NODE_ENV 的值設(shè)為 production。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

配置方式

mode:'development',

總結(jié)

這一節(jié)對webpack配置進(jìn)行了優(yōu)化橱乱，經(jīng)過這些優(yōu)化辜梳，無論我們的項(xiàng)目如何復(fù)雜，模塊如何多泳叠，webpack都不會對我們開發(fā)效率造成影響作瞄，本人實(shí)際項(xiàng)目中涉及150多模塊，引入眾多工具包危纫，經(jīng)過此配置的優(yōu)化仍然保持熱更新在兩秒左右宗挥，開發(fā)效率未受到任何影響，

下一節(jié)我們將對生產(chǎn)環(huán)境進(jìn)行配置种蝶，生產(chǎn)環(huán)境的需求和開發(fā)環(huán)境還是很不一樣的属韧。

項(xiàng)目源碼在這里,看的舒服的話順便給個(gè)star ><