前言

由于前端的快速發(fā)展，相關(guān)工具的發(fā)展速度也是相當(dāng)迅猛，各大框架例如vue,react都有自己優(yōu)秀的腳手架工具來(lái)幫助我們快速啟動(dòng)一個(gè)新項(xiàng)目，也正式因?yàn)檫@個(gè)原因，我們對(duì)于腳手架中最關(guān)鍵的一環(huán)webpack相關(guān)的優(yōu)化知之甚少，腳手架基本上已經(jīng)為我們做好了相關(guān)的開發(fā)準(zhǔn)備，但是當(dāng)我們想要做一些定制化的優(yōu)化操作時(shí)，對(duì)webpack的優(yōu)化也需要有一定的了解，否則無(wú)從下手，接下來(lái)就讓我們進(jìn)入webpack的優(yōu)化世界

構(gòu)建速度提升

loader提升

loader是webpack中最重要的特性，由于webpack自身只支持JavaScript，因此需要一系列的loader來(lái)處理那些非JavaScript模塊，因此在我們用webpack建項(xiàng)目的時(shí)候一定會(huì)使用一系列的loader，例如：vue-loader、sass-loader、babel-loader等等，就以babel-loader為例，來(lái)看具體配置：

module: {
 rules: [{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader?cacheDirectory=true',
  options: {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/transform-runtime']
  }
 }]
 }

• 對(duì)于loader來(lái)說(shuō)最常用的就是exclude屬性，用來(lái)避免不必要的轉(zhuǎn)譯，上面通過(guò)exclude來(lái)避免對(duì)node_modules中js中進(jìn)行轉(zhuǎn)譯來(lái)提升構(gòu)建速度，但是這樣帶來(lái)的提升效果有限。
• cacheDirectory是對(duì)babel-loader的轉(zhuǎn)譯結(jié)果進(jìn)行緩存，之后的webpack進(jìn)行構(gòu)建時(shí)，都會(huì)去嘗試讀取緩存來(lái)避免高耗能的babel重新轉(zhuǎn)譯過(guò)程，cacheDirectory可以指定一個(gè)緩存目錄或者指定為true，為true時(shí)將使用默認(rèn)的緩存目錄node_modules/.cache/babel-loader。
• babel對(duì)一些公共方法使用了非常小的輔助代碼，默認(rèn)會(huì)注入到每一個(gè)需要的文件，這樣就造成重復(fù)引入，這時(shí)候就需要像上面那樣引入transform-runtime來(lái)告訴babel引入runtime來(lái)代替注入

第三方庫(kù)優(yōu)化

externals

externals提高構(gòu)建速度的方法就是在構(gòu)建時(shí)不會(huì)將指定的依賴包打包到bundle中，而是在運(yùn)行時(shí)再?gòu)耐獠揩@取依賴，具體是怎么用的呢？來(lái)看個(gè)例子：

externals : {
 vue : "Vue",
 vueRouter : "VueRouter",
 vueResource : "VueResource",
 vuex : "Vuex"
},
<script type="text/javascript" src="https//xxxx/vue.famliy.1.1.0.min.js"></script>

上面的例子的將vue全家桶都配置在externals中，然后將壓縮包合成一個(gè)js文件放在cdn上面，這樣就不會(huì)在構(gòu)建時(shí)將文件打包到bundle中，提升打包速度，同時(shí)cdn又可以做緩存，提高訪問(wèn)速度，美滋滋

DllPlugin

DllPlugin是用來(lái)干什么的呢？DllPlugin會(huì)將第三方包到一個(gè)單獨(dú)文件，并且生成一個(gè)映射的json文件，打包的生成的文件就是一個(gè)依賴庫(kù)，這個(gè)依賴不會(huì)隨著你的業(yè)務(wù)代碼改變而被重新打包，只有當(dāng)它自身依賴的包發(fā)生變化時(shí)才會(huì)需要重新打包依賴庫(kù)，接下來(lái)來(lái)看具體配置吧：

module.exports = {
 entry: {
 vendor: ['vue', 'vue-router', 'vue-resource', 'vuex']
 },
 output: {
 path: path.join(__dirname, 'dist'),
 filename: '[name].js',
 library: '[name]_hash',
 },
 plugins: [
 new webpack.DllPlugin({
  name: '[name]_[hash]',
  path: path.join(__dirname, 'dist', '[name]-manifest.json'),
  context: __dirname
 })
 ]
}

首先我們需要一個(gè)如上面例子那樣的dll配置文件，然后編譯這個(gè)配置文件，生成一個(gè)vendor.js和一個(gè)映射文件vendor-manifest.json，然后再在我們的webpack配置文件中對(duì)進(jìn)行配置：

plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendor-manifest.json')
 })
 ]

這樣就完成配置了，是不是很簡(jiǎn)單呢？趕緊動(dòng)手試試吧

happypack

happypack這是個(gè)什么呢？我們都知道webpack是個(gè)單線程處理任務(wù)的，當(dāng)又多個(gè)任務(wù)需要處理的時(shí)候，需要排隊(duì)，那happypack就是用多線程來(lái)處理任務(wù)，通過(guò)并發(fā)處理來(lái)提高任務(wù)處理速度，那么這個(gè)需要怎么配置呢？來(lái)看具體例子：

const happypack = require('happypack')
// 創(chuàng)建并發(fā)池
const threadPool = happypack.ThreadPool({size: os.cpus().length})
module: {
 rules: [{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'happypack/loader?id=happyBabel' // id對(duì)應(yīng)happypack插件id
 }]
 },
plugins: [
 new happypack({
  id: 'happyBabel',
  threadPool: threadPool,
  loaders: ['babel-loader?cacheDirectory']
 })
 ],

減小構(gòu)建體積

webpack-bundle-analyzer

這個(gè)相信大家都很熟悉，就是一個(gè)可視化工具，用來(lái)查看各個(gè)包的大小以及相互之間的依賴關(guān)系，配置方法也很簡(jiǎn)單，就和插件的配置一樣，來(lái)看具體例子：

const bundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
plugins: [
 new bundleAnalyzerPlugin()
 ],

tree shaking

tree shaking指的是什么呢？通常指的是JavaScript上下文中未引用的代碼，怎么理解呢？比如你引用了lodash包，里面有許多和JavaScript相關(guān)的便利方法，但你實(shí)際只用了其中的一兩個(gè)，此時(shí)打包時(shí)如果把所有的方法都打進(jìn)去了，是不是很浪費(fèi)呢？tree shaking的概念就是去除多余代碼。來(lái)看一個(gè)簡(jiǎn)單的例子：

import {plus} from './count'

console.log(plus(1, 2))

function plus(x, y) {
 return x + y
}
function minus(x, y) {
 return x - y
}
export {
 plus,
 minus
}

const path = require('path')

module.exports = {
 entry: {
 main: './src/index.js',
 },
 output: {
 path: path.join(__dirname, 'dist'),
 filename: '[name].js',
 },
 mode: 'development'
}

如上例所示，在入口文件中我們引入count.js中plus方法，我們期望的當(dāng)然是只會(huì)引入plus方法，而不是都引入，但往往不隨人愿，來(lái)看結(jié)果：

你會(huì)發(fā)現(xiàn)編譯后的代碼中，整個(gè)count.js都被編譯進(jìn)去了，這時(shí)候你就需要tree shaking了，接下來(lái)看做tree shaking的具體方法

UglifyJsPlugin

這個(gè)插件大家一定都用過(guò)，使用UglifyJsPlugin就可以在構(gòu)建的過(guò)程中對(duì)冗余的代碼進(jìn)行刪除，在webpack4中只需要將上面mode的值改為production，就會(huì)啟用UglifyJsPlugin，是不是很簡(jiǎn)單，或許你想知道webpack4中怎么自己配置UglifyJsPlugin，那就來(lái)看具體配置吧：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
optimization: {
 minimizer: [
  new UglifyJsPlugin({
  parallel: true,
  cache: true,
  uglifyOptions: {
   compress: {
   drop_console: true,
   reduce_vars: true
   },
   output: {
   comments: false,
   beautify: false
   }
  }
  })
 ]
 }

是的在webpack4中的UglifyJsPlugin是配置在optimization中的minimizer中的，配置是不很簡(jiǎn)單呢？趕緊動(dòng)手嘗試吧

按需加載(import)

這里的import是指webpack中的動(dòng)態(tài)加載，它的語(yǔ)法和ES6中的動(dòng)態(tài)加載語(yǔ)法一摸一樣，這是官方推薦的按需加載的方式，還是上面tree shaking的例子，我們只想引入plus方法，我們來(lái)看具體怎么使用：

import('./count.js').then((count) => {
 console.log(count.plus(1, 2))
})

我們只需要將入口文件改成上面的形式，其他的都不要變就可以實(shí)現(xiàn)按需引入，是不是很簡(jiǎn)單呢？在vue中路由的按需加載也可以這么用，來(lái)看一個(gè)簡(jiǎn)單的例子：

function view (name) {
 return new Promise((resolve, reject) => {
 import('../views/' + name + '.vue')
  .then((res) => {
  resolve(res)
  }).catch(e => {
  reject('網(wǎng)絡(luò)異常，請(qǐng)稍后再試')
  })
 }).catch(err => {
 throw new Error('err，組件加載失敗')
 })
}

傳入一個(gè)名字，動(dòng)態(tài)引入對(duì)應(yīng)目錄的下的視圖文件，這只是一個(gè)簡(jiǎn)單的例子，具體的使用形式還是依據(jù)具體的場(chǎng)景

總結(jié)

這篇文章簡(jiǎn)單的從構(gòu)建速度和代碼體積兩個(gè)方面簡(jiǎn)單的介紹了webpack優(yōu)化相關(guān)的方法，希望大家都能自己動(dòng)手去寫一寫，畢竟只有實(shí)踐出真知，更何況是編程。

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論